/* AI投资机器人网站自定义样式 */

/* 主题色彩变量 */
:root {
    --primary: #0d6efd;
    --primary-dark: #0b5ed7;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --light: #f8f9fa;
    --dark: #212529;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--dark);
}

/* Hero区域渐变背景 */
.hero-section {
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

/* 卡片组件增强 */
.card {
    border: none;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    border-radius: 0.75rem;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    font-weight: 600;
}

/* 机器人卡片特殊样式 */
.robot-card {
    position: relative;
    overflow: hidden;
}

.robot-card .card-body {
    padding: 1.5rem;
}

.robot-card .robot-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.robot-card .robot-strategy {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.robot-card .metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.robot-card .metric-label {
    color: #6c757d;
}

.robot-card .metric-value {
    font-weight: 600;
}

.robot-card .metric-value.positive {
    color: var(--success);
}

.robot-card .metric-value.negative {
    color: var(--danger);
}

/* 进度条样式 */
.progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.progress-bar {
    border-radius: 4px;
}

/* 徽章样式 */
.badge {
    font-size: 0.75rem;
    font-weight: 500;
}

.badge.strategy-badge {
    background-color: var(--primary);
}

.badge.source-badge {
    background-color: var(--info);
}

.badge.status-active {
    background-color: var(--success);
}

.badge.status-inactive {
    background-color: var(--warning);
}

/* 按钮组增强 */
.btn-group-action {
    width: 100%;
}

.btn-group-action .btn {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* 导航栏样式 */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.navbar-nav .nav-link {
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary) !important;
}

/* 统计数据区域 */
.stat-item h3 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

/* 筛选面板样式 */
.filter-panel .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.filter-panel .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 分页样式 */
.pagination .page-link {
    color: var(--primary);
    border: 1px solid #dee2e6;
}

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

.pagination .page-link:hover {
    color: var(--primary-dark);
    background-color: #e9ecef;
}

/* 加载状态 */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.skeleton-item {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Toast通知样式 */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
}

.toast {
    border: none;
    box-shadow: var(--box-shadow-lg);
}

.toast-success {
    background-color: var(--success);
    color: white;
}

.toast-error {
    background-color: var(--danger);
    color: white;
}

.toast-warning {
    background-color: var(--warning);
    color: var(--dark);
}

.toast-info {
    background-color: var(--info);
    color: var(--dark);
}

/* 表格样式 */
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

.table th {
    font-weight: 600;
    color: var(--dark);
    border-top: none;
}

/* 模态框样式 */
.modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: var(--box-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    background-color: var(--light);
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

/* 表单增强 */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label {
    color: var(--primary);
}

/* 图表容器 */
.chart-container {
    position: relative;
    margin: 1rem 0;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
}

.chart-controls {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--light);
    border-radius: 0.5rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero-section {
        text-align: center;
    }
    
    .hero-section .display-4 {
        font-size: 2.5rem;
    }
    
    .stat-item h3 {
        font-size: 2rem;
    }
    
    .filter-panel {
        margin-bottom: 1rem;
    }
    
    .btn-group-action {
        flex-direction: column;
    }
    
    .btn-group-action .btn {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 576px) {
    .hero-section .display-4 {
        font-size: 2rem;
    }
    
    .stat-item h3 {
        font-size: 1.75rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .navbar-brand {
        font-size: 1.25rem;
    }
}

/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 工具类 */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cursor-pointer {
    cursor: pointer;
}

.user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.shadow-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
    box-shadow: var(--box-shadow-lg);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Footer样式 - 彻底覆盖为浅紫色背景 */
footer,
footer.bg-dark,
footer.bg-light,
footer.bg-primary,
footer.bg-secondary,
footer[class*="bg-"] {
    background: linear-gradient(135deg, #e6e6fa 0%, #d8bfd8 100%) !important;
    background-color: #e6e6fa !important;
}

/* 彻底覆盖所有footer文字颜色 - 最高优先级 */
html footer,
html footer *,
html footer h1, html footer h2, html footer h3, html footer h4, html footer h5, html footer h6,
html footer p, html footer a, html footer li, html footer span, html footer div, html footer small,
html footer .text-muted, html footer .text-white, html footer .text-light, html footer .text-dark,
html footer .text-secondary, html footer .text-black, html footer .text-primary,
html footer .container, html footer .container *,
html footer .row, html footer .row *,
html footer .col-lg-4, html footer .col-lg-4 *,
html footer .col-lg-2, html footer .col-lg-2 *,
html footer .col-lg-2, html footer .col-lg-2 *,
html footer .col-md-3, html footer .col-md-3 *,
html footer .col-md-6, html footer .col-md-6 *,
html footer ul, html footer ol, html footer li {
    color: #333333 !important;
}

/* 品牌标题和栏目标题 - 深紫色 */
html footer h5,
html footer h6,
html footer .text-primary {
    color: #663399 !important;
}

/* 超级强制覆盖 - 针对所有可能的背景类 */
html footer.bg-dark,
html footer.bg-dark *,
html footer.bg-light,
html footer.bg-light *,
html footer[class*="bg-"],
html footer[class*="bg-"] *,
html footer.bg-dark h1, html footer.bg-dark h2, html footer.bg-dark h3, 
html footer.bg-dark h4, html footer.bg-dark h5, html footer.bg-dark h6,
html footer.bg-dark p, html footer.bg-dark a, html footer.bg-dark li, 
html footer.bg-dark span, html footer.bg-dark div, html footer.bg-dark small {
    background: linear-gradient(135deg, #e6e6fa 0%, #d8bfd8 100%) !important;
    background-color: #e6e6fa !important;
    color: #333333 !important;
}

/* 标题特殊颜色 - 最高优先级 */
html footer.bg-dark h5,
html footer.bg-dark h6,
html footer.bg-light h5,
html footer.bg-light h6,
html footer h5.text-primary,
html footer h6.text-white {
    color: #663399 !important;
}

/* Bootstrap颜色类强制覆盖 - 最高优先级 */
html footer .text-muted,
html footer .text-white,
html footer .text-light,
html footer .text-dark,
html footer .text-secondary {
    color: #555555 !important;
}

/* 链接样式强制覆盖 - 深紫色主题 */
html footer a,
html footer a:link,
html footer a:visited,
html footer .text-decoration-none {
    color: #663399 !important;
    text-decoration: none !important;
}

html footer a:hover,
html footer a:focus,
html footer a:active {
    color: #4d2673 !important;
    text-decoration: underline !important;
}

/* 分隔线样式 - 适配浅紫色背景 */
html footer hr {
    border-color: #b19cd9 !important;
    opacity: 0.6 !important;
}

/* 特殊覆盖 - 确保背景颜色生效 */
body footer,
body footer.bg-dark {
    background: linear-gradient(135deg, #e6e6fa 0%, #d8bfd8 100%) !important;
}

/* 打印样式 */
@media print {
    .navbar,
    .filter-panel,
    .pagination,
    footer {
        display: none !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}