/* ========================================
   dark.css - 深色主题（Glassmorphism风格）
   ======================================== */

[data-theme="dark"],
html:not([data-theme]) body:not([data-theme="light"]) {
    --bg-color: #0F0F1A;
    --bg-secondary: #1a1a2e;
    --bg-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);

    --text-color: #F1F5F9;
    --text-secondary: #C7D2FE;
    --text-muted: #A5B4FC;

    --card-bg: rgba(30, 32, 60, 0.6);
    --card-border: rgba(129, 140, 248, 0.2);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --primary-color: #818CF8;
    --primary-hover: #6366F1;
    --primary-light: rgba(129, 140, 248, 0.2);
    --primary-glow: rgba(129, 140, 248, 0.4);

    --success-color: #34D399;
    --danger-color: #F87171;
    --warning-color: #FBBF24;
    --info-color: #60A5FA;

    --input-bg: rgba(30, 32, 60, 0.6);
    --input-border: rgba(129, 140, 248, 0.25);
    --input-focus: #818CF8;
    --nav-bg: rgba(15, 15, 30, 0.6);
    --sidebar-bg: rgba(22, 22, 45, 0.6);
}

/* 深色特殊样式 */
[data-theme="dark"] body {
    background: var(--bg-gradient);
}

/* 深色模式装饰光球（更明显） */
[data-theme="dark"] body::before {
    background: radial-gradient(circle, rgba(129, 140, 248, 0.35) 0%, transparent 70%);
    opacity: 0.8;
}
[data-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    opacity: 0.7;
}

[data-theme="dark"] .card {
    background: rgba(30, 32, 60, 0.6);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .navbar {
    background: rgba(15, 15, 30, 0.7);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border-bottom: 1px solid rgba(129, 140, 248, 0.15);
}

[data-theme="dark"] .mobile-tab {
    background: rgba(15, 15, 30, 0.7);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border-top: 1px solid rgba(129, 140, 248, 0.15);
}

[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, rgba(67, 56, 202, 0.85) 0%, rgba(88, 28, 135, 0.85) 50%, rgba(126, 34, 206, 0.85) 100%);
    border-color: rgba(129, 140, 248, 0.3);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .quick-item {
    background: rgba(30, 32, 60, 0.6);
    border-color: rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .quick-item:hover {
    background: rgba(40, 42, 75, 0.7);
}

[data-theme="dark"] .mat-card {
    background: rgba(30, 32, 60, 0.6);
    border-color: rgba(129, 140, 248, 0.2);
}

[data-theme="dark"] .mat-card:hover {
    background: rgba(40, 42, 75, 0.7);
    border-color: rgba(129, 140, 248, 0.35);
}

[data-theme="dark"] .auth-card {
    background: rgba(30, 32, 60, 0.6);
    border-color: rgba(129, 140, 248, 0.25);
}

[data-theme="dark"] .auth-tabs {
    background: rgba(20, 22, 50, 0.6);
    border-color: rgba(129, 140, 248, 0.15);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
html body:not([data-theme="light"]) input[type="text"],
html body:not([data-theme="light"]) input[type="password"],
html body:not([data-theme="light"]) input[type="email"],
html body:not([data-theme="light"]) input[type="number"],
html body:not([data-theme="light"]) input[type="url"],
html body:not([data-theme="light"]) input[type="tel"],
html body:not([data-theme="light"]) select,
html body:not([data-theme="light"]) textarea {
    background: rgba(30, 32, 60, 0.6);
    color: #EEF0F6;
    border-color: rgba(129, 140, 248, 0.25);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
html body:not([data-theme="light"]) input:focus {
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.25);
    background: rgba(40, 42, 75, 0.7);
    border-color: #818CF8;
}

[data-theme="dark"] .btn-outline,
html body:not([data-theme="light"]) .btn-outline {
    border-color: rgba(129, 140, 248, 0.45);
    color: #C7D2FE;
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(129, 140, 248, 0.2) !important;
    border-color: #818CF8;
    color: #fff !important;
}

[data-theme="dark"] .badge-success { background: rgba(52, 211, 153, 0.2); color: #34D399; border-color: rgba(52, 211, 153, 0.3); }
[data-theme="dark"] .badge-danger  { background: rgba(248, 113, 113, 0.2); color: #F87171; border-color: rgba(248, 113, 113, 0.3); }
[data-theme="dark"] .badge-warning { background: rgba(251, 191, 36, 0.2); color: #FBBF24; border-color: rgba(251, 191, 36, 0.3); }
[data-theme="dark"] .badge-info    { background: rgba(129, 140, 248, 0.2); color: #A5B4FC; border-color: rgba(129, 140, 248, 0.3); }

[data-theme="dark"] .stats-pill {
    background: rgba(129, 140, 248, 0.15);
    color: #C7D2FE;
    border-color: rgba(129, 140, 248, 0.25);
}

[data-theme="dark"] .theme-toggle {
    background: rgba(30, 32, 60, 0.6);
    border-color: rgba(129, 140, 248, 0.25);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(50, 52, 90, 0.7);
}

/* 深色滚动条 */
[data-theme="dark"] ::-webkit-scrollbar,
html body:not([data-theme="light"]) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track,
html body:not([data-theme="light"]) ::-webkit-scrollbar-track {
    background: rgba(129, 140, 248, 0.05);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb,
html body:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.2);
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html body:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 140, 248, 0.35);
}

/* ==========================================================
   登录页主题统一（与后台同一套靛蓝→紫→粉）
   ========================================================== */
[data-theme="dark"] .auth-brand-icon {
    background: linear-gradient(135deg, #4F46E5, #7C3AED 55%, #DB2777);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.35);
}
[data-theme="dark"] .auth-card::before {
    background: linear-gradient(90deg, #4F46E5, #7C3AED, #DB2777, #F43F5E);
}
[data-theme="dark"] .auth-tab.active {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}
[data-theme="dark"] .auth-tab:not(.active):hover {
    color: #FFFFFF;
    background: rgba(129, 140, 248, 0.20);
}
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.35);
}
[data-theme="dark"] .btn-primary::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
}
[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 14px 32px rgba(79, 70, 229, 0.45);
}
[data-theme="dark"] .form-input {
    background: rgba(30, 32, 60, 0.60);
    border-color: rgba(129, 140, 248, 0.25);
    color: #EEF0F6;
}
[data-theme="dark"] .form-input:focus {
    background: rgba(40, 42, 75, 0.70);
    border-color: #818CF8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.25);
}
[data-theme="dark"] .form-input::placeholder { color: rgba(199, 210, 254, 0.5); }
[data-theme="dark"] .bg-orb { opacity: 0.50; }
[data-theme="dark"] .bg-orb-1 { background: radial-gradient(circle, rgba(129, 140, 248, 0.40) 0%, transparent 70%); }
[data-theme="dark"] .bg-orb-2 { background: radial-gradient(circle, rgba(139, 92, 246, 0.38) 0%, transparent 70%); }
[data-theme="dark"] .bg-orb-3 { background: radial-gradient(circle, rgba(219, 39, 119, 0.30) 0%, transparent 70%); }
[data-theme="dark"] .bg-orb-4 { background: radial-gradient(circle, rgba(99, 102, 241, 0.32) 0%, transparent 70%); }

/* ==========================================================
   登录/注册表单文字兜底（防止白字、自动填充、UA 样式）
   ========================================================== */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] .auth-card label,
[data-theme="dark"] .auth-card .form-group label {
    color: #E2E8F0 !important;
    text-shadow: none !important;
}
[data-theme="dark"] .auth-card input,
[data-theme="dark"] .auth-card textarea,
[data-theme="dark"] .auth-card select,
[data-theme="dark"] .auth-card .form-input {
    color: #EEF0F6 !important;
    -webkit-text-fill-color: #EEF0F6;
    background: rgba(30, 32, 60, 0.60) !important;
    border-color: rgba(129, 140, 248, 0.25) !important;
}
[data-theme="dark"] .auth-card input::placeholder,
[data-theme="dark"] .auth-card textarea::placeholder,
[data-theme="dark"] .auth-card .form-input::placeholder {
    color: rgba(199, 210, 254, 0.55) !important;
    -webkit-text-fill-color: rgba(199, 210, 254, 0.55);
    opacity: 1;
}
[data-theme="dark"] .auth-card .input-icon-wrap i { color: #A5B4FC !important; }
[data-theme="dark"] .auth-card input:focus,
[data-theme="dark"] .auth-card textarea:focus,
[data-theme="dark"] .auth-card select:focus,
[data-theme="dark"] .auth-card .form-input:focus {
    border-color: #818CF8 !important;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.25) !important;
}
[data-theme="dark"] .auth-card input:-webkit-autofill,
[data-theme="dark"] .auth-card input:-webkit-autofill:hover,
[data-theme="dark"] .auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #EEF0F6 !important;
    -webkit-box-shadow: 0 0 0 1000px #1E203C inset !important;
    caret-color: #EEF0F6;
}

/* 前端表单：深色主题下拉箭头与文件框 */
[data-theme="dark"] .form-stack .form-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A5B4FC' d='M1.4 1.4 6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
}
[data-theme="dark"] .form-stack .form-file,
[data-theme="dark"] #app input[type="file"] {
    background: rgba(30, 32, 60, 0.55);
    border-color: rgba(129, 140, 248, 0.30);
    color: #A5B4FC;
}