﻿/* ===========================
   共享全局样式
   =========================== */

/* 暗黑模式颜色变量 */
:root {
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #212529;
    --bs-body-color: #f8f9fa;
    --bs-border-color: #495057;
}

/* 全局平滑过渡 */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 自适应输入框样式 */
.adaptive-input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.adaptive-input:focus {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* 自适应卡片样式 */
.adaptive-card {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 响应式图片 */
img {
    max-width: 100%;
    height: auto;
}

/* 通用按钮悬停效果 */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 加载动画 */
.spinner-border {
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* 暗黑模式下的表单控件 */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #495057;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #6c757d;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

/* 暗黑模式下的卡片 */
[data-bs-theme="dark"] .card {
    background-color: #212529;
    border-color: #495057;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: #1a1d20;
    border-color: #495057;
}

/* 暗黑模式下的模态框 */
[data-bs-theme="dark"] .modal-content {
    background-color: #212529;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: #495057;
}

/* 暗黑模式下的表格 */
[data-bs-theme="dark"] .table {
    --bs-table-bg: #212529;
    --bs-table-color: #f8f9fa;
    --bs-table-border-color: #495057;
}

/* 暗黑模式下的导航栏 */
[data-bs-theme="dark"] .navbar {
    background-color: #1a1d20 !important;
}

/* 自定义滚动条 (WebKit浏览器) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bs-body-bg);
}

::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1d20;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #495057;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

/* 工具提示样式优化 */
.form-text {
    font-size: 0.875rem;
    color: #6c757d;
}

[data-bs-theme="dark"] .form-text {
    color: #adb5bd;
}

/* 链接样式 */
a {
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    text-decoration: underline;
}

/* 警告框样式 */
.alert {
    border-radius: 0.375rem;
}

/* 徽章样式 */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* 面包屑导航 */
.breadcrumb {
    background-color: transparent;
    padding: 0;
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

/* 下拉菜单暗黑模式 */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #343a40;
    border-color: #495057;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #495057;
    color: #ffffff;
}

/* 分页组件暗黑模式 */
[data-bs-theme="dark"] .pagination .page-link {
    background-color: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: #495057;
    color: #ffffff;
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* 列表组暗黑模式 */
[data-bs-theme="dark"] .list-group-item {
    background-color: #212529;
    border-color: #495057;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: #343a40;
}

/* 进度条暗黑模式 */
[data-bs-theme="dark"] .progress {
    background-color: #343a40;
}

/* 响应式工具类补充 */
@media (max-width: 576px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===========================
   登录 / 注册页面布局
   =========================== */

.login-container,
.register-container {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - 3.5rem);
    margin: -1rem -1.5rem -1rem -2rem;
}

.login-left,
.register-left {
    flex: 1;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 100%);
}

.login-right {
    flex: 1;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
}

.register-right {
    flex: 1;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
    overflow-y: auto;
}

[data-bs-theme="dark"] .login-left,
[data-bs-theme="dark"] .register-left {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.05) 100%);
}

[data-bs-theme="dark"] .login-right,
[data-bs-theme="dark"] .register-right {
    background: linear-gradient(135deg, #0f1214 0%, #212529 100%);
}

@media (max-width: 640.98px) {
    .login-container,
    .register-container {
        margin: -1rem;
    }

    .login-right,
    .register-right {
        width: 100%;
    }
}
