/**
 * 核心主题样式 - Modern Tech Design
 * 包含: CSS变量定义、亮色/暗色模式、通用原子类
 */

:root {
    /* ==================== Light Mode (Default) ==================== */
    
    /* 主色调 */
    --tech-primary: #6366f1;        /* Indigo 500 */
    --tech-primary-hover: #4f46e5;  /* Indigo 600 */
    --tech-primary-light: rgba(99, 102, 241, 0.1);
    
    /* 背景色 */
    --tech-bg: #f8fafc;             /* Slate 50 */
    --tech-card-bg: #ffffff;        /* White */
    --tech-surface: #f1f5f9;        /* Slate 100 -用于输入框等 */
    
    /* 文本色 */
    --tech-text-primary: #1e293b;   /* Slate 800 */
    --tech-text-secondary: #64748b; /* Slate 500 */
    --tech-text-muted: #94a3b8;     /* Slate 400 */
    
    /* 边框与分割线 */
    --tech-border: #e2e8f0;         /* Slate 200 */
    
    /* 状态色 - 成功 */
    --tech-success: #10b981;        /* Emerald 500 */
    --tech-success-bg: #ecfdf5;     /* Emerald 50 */
    --tech-success-text: #047857;   /* Emerald 700 */
    
    /* 状态色 - 错误 */
    --tech-error: #ef4444;          /* Red 500 */
    --tech-error-bg: #fef2f2;       /* Red 50 */
    --tech-error-text: #b91c1c;     /* Red 700 */
    
    /* 状态色 - 警告 */
    --tech-warning: #f59e0b;        /* Amber 500 */
    --tech-warning-bg: #fffbeb;     /* Amber 50 */
    --tech-warning-text: #b45309;   /* Amber 700 */

    /* 阴影与圆角 */
    --tech-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tech-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
    --tech-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    
    --tech-radius-sm: 4px;
    --tech-radius-md: 8px;
    --tech-radius-lg: 12px;
    
    /* 动画 */
    --tech-transition: all 0.2s ease;
}

/* ==================== Dark Mode ==================== */
[data-theme="dark"] {
    /* 主色调 - 调暗以减少刺眼感 */
    --tech-primary: #6366f1;        /* Indigo 500 - 保持品牌色，但在深色背景上 */
    --tech-primary-hover: #818cf8;  /* Indigo 400 */
    --tech-primary-light: rgba(99, 102, 241, 0.15);

    /* 背景色 - 极深色/接近纯黑 */
    --tech-bg: #050505;             /* Near Black - 更深的背景 */
    --tech-card-bg: #141414;        /* Dark Gray - 标准深色卡片背景 */
    --tech-surface: #1e1e1e;        /* Surface - 稍亮的表面颜色 */

    /* 文本色 - 降低对比度以防刺眼 */
    --tech-text-primary: #e2e2e2;   /* Off-white */
    --tech-text-secondary: #a1a1aa; /* Slate 400 */
    --tech-text-muted: #52525b;     /* Slate 600 */

    /* 边框 - 更深更柔和 */
    --tech-border: #27272a;         /* Slate 800 */

    /* 状态色 - 成功 - 降低饱和度 */
    --tech-success: #10b981;        /* Emerald 500 */
    --tech-success-bg: rgba(16, 185, 129, 0.1);
    --tech-success-text: #6ee7b7;   /* Emerald 300 */

    /* 状态色 - 错误 */
    --tech-error: #ef4444;          /* Red 500 */
    --tech-error-bg: rgba(239, 68, 68, 0.1);
    --tech-error-text: #fca5a5;     /* Red 300 */
    
    /* 状态色 - 警告 */
    --tech-warning: #f59e0b;        /* Amber 500 */
    --tech-warning-bg: rgba(245, 158, 11, 0.1);
    --tech-warning-text: #fcd34d;   /* Amber 300 */
    
    /* 阴影调整 - 深色模式下使用深色阴影增加层次 */
    --tech-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --tech-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --tech-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* ==================== Global Reset & Utilities ==================== */
body {
    background-color: var(--tech-bg);
    color: var(--tech-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--tech-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tech-text-muted);
}

/* 通用按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--tech-radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--tech-transition);
    border: 1px solid transparent;
    gap: 8px;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--tech-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--tech-primary-hover);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.btn-secondary {
    background-color: var(--tech-bg);
    color: var(--tech-text-secondary);
    border-color: var(--tech-border);
}

.btn-secondary:hover {
    background-color: var(--tech-surface);
    color: var(--tech-text-primary);
    border-color: var(--tech-text-muted);
}

/* Dark Mode Button Override - 更柔和的按钮样式 */
[data-theme="dark"] .btn-secondary {
    background-color: var(--tech-card-bg);
    color: var(--tech-text-secondary);
    border-color: var(--tech-border);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--tech-surface);
    color: var(--tech-text-primary);
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .btn-primary {
    background-color: rgba(99, 102, 241, 0.45);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--tech-text-primary);
}

[data-theme="dark"] .btn-primary:hover {
    background-color: rgba(99, 102, 241, 0.6);
    border-color: rgba(99, 102, 241, 0.5);
    color: #fff;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.15);
}

/* Outline 按钮暗色：避免 Bootstrap 默认高亮蓝/白底 */
[data-theme="dark"] .btn-outline-primary {
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.4);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-check:checked + .btn-outline-primary,
[data-theme="dark"] .btn-check:active + .btn-outline-primary {
    color: var(--tech-text-primary);
    background-color: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.45);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--tech-text-secondary);
    border-color: var(--tech-border);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    color: var(--tech-text-primary);
    background-color: var(--tech-surface);
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .btn-outline-danger {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
    background-color: transparent;
}

[data-theme="dark"] .btn-outline-danger:hover {
    color: #fecaca;
    background-color: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.45);
}

.btn-warning {
    background-color: var(--tech-warning);
    color: white;
}

.btn-warning:hover {
    background-color: var(--tech-warning-text);
}

.btn-block {
    width: 100%;
    display: flex;
}

.btn-icon {
    padding: 6px;
    border-radius: 6px;
    color: var(--tech-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--tech-transition);
}

.btn-icon:hover {
    background-color: var(--tech-surface);
    color: var(--tech-primary);
}

/* Dark Mode Icon Button Override */
[data-theme="dark"] .btn-icon {
    color: var(--tech-text-muted);
}

[data-theme="dark"] .btn-icon:hover {
    background-color: var(--tech-surface);
    color: rgba(99, 102, 241, 0.8);
}

/* ==================== User menu dropdown ==================== */
.user-menu {
    display: inline-flex;
    align-items: center;
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--tech-text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--tech-radius-md);
    transition: var(--tech-transition);
    white-space: nowrap;
    text-decoration: none;
}

.user-menu-toggle:hover,
.user-menu-toggle:focus,
.user-menu-toggle.show {
    color: var(--tech-text-primary);
    background: var(--tech-surface);
}

.user-menu-toggle::after {
    /* Hide Bootstrap's default caret; we render our own */
    display: none !important;
}

.user-menu-caret {
    font-size: 11px;
    color: var(--tech-text-muted);
    margin-left: 2px;
}

.user-menu-dropdown {
    min-width: 160px;
    background: var(--tech-card-bg);
    border: 1px solid var(--tech-border);
    box-shadow: var(--tech-shadow-md);
}

.user-menu-dropdown .dropdown-item {
    color: var(--tech-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.user-menu-dropdown .dropdown-item:hover,
.user-menu-dropdown .dropdown-item:focus {
    background: var(--tech-surface);
    color: var(--tech-text-primary);
}

.user-menu-dropdown .dropdown-divider {
    border-color: var(--tech-border);
    opacity: 1;
}

.user-menu-logout {
    color: var(--tech-error) !important;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
}

.user-menu-logout:hover,
.user-menu-logout:focus {
    background: var(--tech-error-bg) !important;
    color: var(--tech-error-text) !important;
}

/* Navbar variant: sit flush with other btn-link tools */
.user-menu--navbar .user-menu-toggle.btn-link {
    padding: 4px 8px;
    color: var(--tech-text-primary);
    text-decoration: none;
    box-shadow: none;
}

.user-menu--navbar .user-menu-toggle.btn-link:hover,
.user-menu--navbar .user-menu-toggle.btn-link:focus,
.user-menu--navbar .user-menu-toggle.btn-link.show {
    color: var(--tech-text-primary);
    background: var(--tech-surface);
}

/* Landing variant */
.user-menu--landing .user-menu-toggle {
    color: var(--tech-text-secondary);
    padding: 6px 12px;
}

.user-menu--landing .user-menu-toggle:hover,
.user-menu--landing .user-menu-toggle:focus,
.user-menu--landing .user-menu-toggle.show {
    color: var(--tech-text-primary);
}

/* Analysis variant: capsule look comes from .user-name in analysis_core.css */
.user-menu--analysis .user-menu-toggle.user-name {
    border: none;
    cursor: pointer;
}

.user-menu--analysis .user-menu-toggle.user-name:hover,
.user-menu--analysis .user-menu-toggle.user-name:focus,
.user-menu--analysis .user-menu-toggle.user-name.show {
    background: var(--tech-bg-secondary, var(--tech-surface));
}

/* 通用卡片样式 */
.tech-card {
    background: var(--tech-card-bg);
    border-radius: var(--tech-radius-md);
    border: 1px solid var(--tech-border);
    box-shadow: var(--tech-shadow-sm);
}

/* 通用输入框样式 */
.tech-input, .form-control {
    background: var(--tech-bg);
    border: 1px solid var(--tech-border);
    color: var(--tech-text-primary);
    padding: 8px 12px;
    border-radius: var(--tech-radius-md);
    font-size: 14px;
    transition: var(--tech-transition);
    width: 100%;
    box-sizing: border-box;
}

.form-select {
    background-color: var(--tech-bg);
    border-color: var(--tech-border);
    color: var(--tech-text-primary);
}

.tech-input:focus, .form-control:focus {
    outline: none;
    border-color: var(--tech-primary);
    box-shadow: 0 0 0 2px var(--tech-primary-light);
    color: var(--tech-text-primary);
    background-color: var(--tech-bg);
}

.form-select:focus {
    border-color: var(--tech-primary);
    box-shadow: 0 0 0 2px var(--tech-primary-light);
    color: var(--tech-text-primary);
    background-color: var(--tech-bg);
}

/* Dark Mode Input Override — :focus 须显式设 color，否则会被 Bootstrap
   .form-control:focus / .form-select:focus 的浅色变量覆盖 */
[data-theme="dark"] .tech-input, 
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .param-input,
[data-theme="dark"] .search-input {
    background-color: var(--tech-card-bg);
    border-color: var(--tech-border);
    color: var(--tech-text-primary);
}

[data-theme="dark"] .tech-input:focus, 
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .param-input:focus,
[data-theme="dark"] .search-input:focus {
    border-color: rgba(99, 102, 241, 0.4);
    background-color: var(--tech-card-bg);
    color: var(--tech-text-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* 文件选择器在暗色下避免白底高亮 */
[data-theme="dark"] .form-control::file-selector-button {
    background-color: var(--tech-surface);
    color: var(--tech-text-secondary);
    border-color: var(--tech-border);
}

[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--tech-text-primary);
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--tech-text-secondary);
    font-weight: 500;
}

.form-text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--tech-text-muted);
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--tech-border);
    color: var(--tech-text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--tech-transition);
}

.theme-toggle-btn:hover {
    background: var(--tech-surface);
    color: var(--tech-primary);
    border-color: var(--tech-primary);
}

/* Alert Styles */
.alert {
    padding: 12px 16px;
    border-radius: var(--tech-radius-md);
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid transparent;
}

.alert-danger {
    background-color: var(--tech-error-bg);
    color: var(--tech-error-text);
    border-color: rgba(239, 68, 68, 0.2);
}

.alert-warning {
    background-color: var(--tech-warning-bg);
    color: var(--tech-warning-text);
    border-color: rgba(245, 158, 11, 0.2);
}

.alert-success {
    background-color: var(--tech-success-bg);
    color: var(--tech-success-text);
    border-color: rgba(16, 185, 129, 0.2);
}

/* ==================== Auth Layout ==================== */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tech-bg);
    padding: 20px;
}

.auth-card {
    background: var(--tech-card-bg);
    border-radius: var(--tech-radius-lg);
    box-shadow: var(--tech-shadow-lg);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--tech-border);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo-wide {
    height: 40px;
    width: auto;
    margin-bottom: 16px;
}

.auth-title-center h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--tech-text-primary);
    margin: 0 0 8px 0;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--tech-text-secondary);
    margin: 0;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 12px;
    color: var(--tech-text-muted);
}

/* QR Code Container */
.qrcode-container {
    margin: 20px auto;
    padding: 16px;
    background: var(--tech-surface);
    border-radius: var(--tech-radius-md);
    display: inline-block;
    border: 1px solid var(--tech-border);
}

#qrcode {
    width: 250px;
    height: 250px;
    margin: 0 auto;
}

.auth-card--wework {
    max-width: 460px;
}

.wework-login-panel {
    text-align: center;
}

.ww-login-embed {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.auth-footer--tight {
    margin-top: 12px;
}

.auth-muted {
    margin-top: 4px;
}

.auth-link {
    color: var(--tech-primary);
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-embed-error {
    color: var(--tech-error);
    font-size: 13px;
    padding: 24px 12px;
}

.auth-alt {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--tech-border);
    text-align: center;
}

.auth-alt-toggle {
    background: none;
    border: none;
    color: var(--tech-text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-alt-toggle:hover {
    color: var(--tech-primary);
}

.auth-password-panel {
    display: none;
    margin-top: 16px;
    text-align: left;
}

.auth-password-panel.is-open {
    display: block;
}

/* ==================== Dark Mode Additional Controls ==================== */
/* 确保所有按钮类型在暗黑模式下都更柔和 */
[data-theme="dark"] button:not(.btn-primary):not(.btn-warning) {
    background-color: var(--tech-card-bg);
    border-color: var(--tech-border);
    color: var(--tech-text-secondary);
}

[data-theme="dark"] button:not(.btn-primary):not(.btn-warning):hover {
    background-color: var(--tech-surface);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--tech-text-primary);
}

/* 搜索框特殊优化 */
[data-theme="dark"] .search-input {
    background-color: var(--tech-card-bg);
    border-color: var(--tech-border);
    color: var(--tech-text-primary);
}

[data-theme="dark"] .search-input:focus {
    border-color: rgba(99, 102, 241, 0.4);
    background-color: var(--tech-card-bg);
    color: var(--tech-text-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* 参数输入框优化 */
[data-theme="dark"] .param-input {
    background-color: var(--tech-card-bg);
    border-color: var(--tech-border);
    color: var(--tech-text-primary);
}

[data-theme="dark"] .param-input:focus {
    border-color: rgba(99, 102, 241, 0.4);
    background-color: var(--tech-card-bg);
    color: var(--tech-text-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Number Input Spin Buttons - 优化数字输入框的上下箭头 */
/* Chrome/Safari/Edge */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.2;
    filter: brightness(0.5);
    cursor: pointer;
}

[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button:hover,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button:hover {
    opacity: 0.4;
    filter: brightness(0.7);
}

/* Firefox - 隐藏spin按钮 */
[data-theme="dark"] input[type="number"] {
    -moz-appearance: textfield;
}

/* 确保所有number input的spin按钮都应用样式 */
[data-theme="dark"] input[type="number"].param-input::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"].param-input::-webkit-outer-spin-button,
[data-theme="dark"] input[type="number"].form-control::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"].form-control::-webkit-outer-spin-button {
    opacity: 0.2;
    filter: brightness(0.5);
}

/* 通用复选框优化 */
[data-theme="dark"] input[type="checkbox"] {
    accent-color: rgba(99, 102, 241, 0.7);
    filter: brightness(0.9);
}

[data-theme="dark"] input[type="checkbox"]:checked {
    accent-color: rgba(99, 102, 241, 0.8);
}