/* assets/theme.css —— 全站共享 CSS 变量 + 暗色模式 + 组件样式 */

/* ============================================================
 * 1) CSS 变量（亮色主题）
 * ============================================================ */
:root {
    /* 页面背景 */
    --bg-page: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    --bg-container: rgba(255, 255, 255, 0.7);
    --bg-card: rgba(255, 255, 255, 0.55);
    --bg-card-hover: rgba(255, 255, 255, 0.75);
    --bg-input: #f8fafc;
    --bg-input-focus: #ffffff;
    --bg-table: rgba(255, 255, 255, 0.4);
    --bg-modal: #ffffff;
    --bg-modal-card: #f8fafc;
    --bg-task-list: rgba(255, 255, 255, 0.4);
    --bg-task-item: rgba(255, 255, 255, 0.8);
    --bg-task-item-hover: rgba(255, 255, 255, 0.95);
    --bg-stat-card: rgba(255, 255, 255, 0.55);
    --bg-stat-card-hover: rgba(255, 255, 255, 0.75);
    --bg-search-tip: #eff6ff;
    --bg-alert-success: #f0fdf4;
    --bg-alert-error: #fef2f2;
    --bg-alert-warning: #fffbeb;
    --bg-amber: #fef3c7;
    --bg-amber-light: #fffbeb;
    --bg-badge-size: #e5e7eb;

    /* 文字 */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --text-heading: #0f172a;

    /* 边框 */
    --border-primary: rgba(203, 213, 225, 0.8);
    --border-light: rgba(226, 232, 240, 0.8);
    --border-input: #cbd5e1;
    --border-task: rgba(203, 213, 225, 0.6);

    /* 强调色 */
    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-blue-light: #60a5fa;
    --accent-green: #16a34a;
    --accent-green-hover: #15803d;
    --accent-red: #dc2626;
    --accent-red-hover: #b91c1c;
    --accent-amber: #d97706;
    --accent-amber-hover: #b45309;
    --accent-purple: #8b5cf6;

    /* 阴影 */
    --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.06);
    --shadow-container: 0 20px 40px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-toast: 0 10px 30px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

/* ============================================================
 * 2) CSS 变量（暗色主题覆盖）
 * ============================================================ */
html.dark-mode {
    --bg-page: #0b0f19;
    --bg-container: #111827;
    --bg-card: #1f2937;
    --bg-card-hover: #253245;
    --bg-input: #1f2937;
    --bg-input-focus: #111827;
    --bg-table: transparent;
    --bg-modal: #111827;
    --bg-modal-card: #1f2937;
    --bg-task-list: #1f2937;
    --bg-task-item: #111827;
    --bg-task-item-hover: #1f2937;
    --bg-stat-card: #1f2937;
    --bg-stat-card-hover: #253245;
    --bg-search-tip: #1e3a8a;
    --bg-alert-success: #064e3b;
    --bg-alert-error: #450a0a;
    --bg-alert-warning: #451a03;
    --bg-amber: #451a03;
    --bg-amber-light: #1f1408;
    --bg-badge-size: #374151;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #9ca3af;
    --text-light: #6b7280;
    --text-heading: #f9fafb;

    --border-primary: #374151;
    --border-light: #1f2937;
    --border-input: #374151;
    --border-task: #374151;

    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-blue-light: #60a5fa;
    --accent-green: #22c55e;
    --accent-green-hover: #16a34a;
    --accent-red: #f87171;
    --accent-red-hover: #ef4444;
    --accent-amber: #fbbf24;
    --accent-amber-hover: #f59e0b;
    --accent-purple: #a78bfa;

    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.4);
    --shadow-container: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --shadow-toast: 0 10px 30px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================================
 * 3) 基础样式
 * ============================================================ */
html.dark-mode body {
    background: var(--bg-page) !important;
    color: var(--text-primary) !important;
}

/* ===== 输入控件 ===== */
input[type="text"],
input[type="password"],
textarea,
select {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
    transition: all 0.2s;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-blue);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

label { color: var(--text-secondary); }

/* ===== 主题切换按钮 ===== */
.theme-toggle-btn {
    color: var(--text-muted);
}
.theme-toggle-btn:hover {
    background: rgba(148, 163, 184, 0.12);
}

/* ===== 标题区域 ===== */
.header-title h2 { color: var(--text-heading); }
.header-title p  { color: var(--text-muted); }

/* ============================================================
 * 4) 模态框
 * ============================================================ */
.modal-backdrop {
    background: rgba(15, 23, 42, 0.65);
}
html.dark-mode .modal-backdrop {
    background: rgba(11, 15, 25, 0.8);
}

.modal-box {
    background: var(--bg-modal);
    color: var(--text-primary);
    box-shadow: var(--shadow-modal);
}
html.dark-mode .modal-box {
    border: 1px solid var(--border-light);
}

.modal-title   { color: var(--text-heading); }
.modal-close   { color: var(--text-light); }

.modal-card-gray {
    background: var(--bg-modal-card);
    border-color: var(--border-light);
    color: var(--text-primary);
}
.modal-input {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}
.modal-input:focus {
    border-color: var(--accent-blue);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
html.dark-mode .modal-input:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.modal-btn-cancel {
    background: #e2e8f0;
    color: var(--text-secondary);
}
.modal-btn-cancel:hover { background: #cbd5e1; }
html.dark-mode .modal-btn-cancel { background: #374151; color: #e5e7eb; }
html.dark-mode .modal-btn-cancel:hover { background: #4b5563; }

.modal-table th {
    background: #f1f5f9;
    color: #475569;
    border-bottom-color: #cbd5e1;
}
.modal-table td {
    border-bottom-color: var(--border-light);
    color: var(--text-primary);
}
html.dark-mode .modal-table th {
    background: #182232 !important;
    color: #cbd5e1 !important;
    border-bottom-color: #2d3748 !important;
}
html.dark-mode .modal-table td {
    border-bottom-color: #1f2937 !important;
    color: #e5e7eb !important;
}
html.dark-mode .modal-table tr:hover { background: #1f2937 !important; }

.modal-desc  { color: var(--text-muted); }
.modal-field { color: var(--text-secondary); }

/* ===== 信息盒 ===== */
.modal-info-box.green { background: #f0fdf4; border: 1px solid #dcfce7; }
.modal-info-box.gray  { background: #f8fafc; border: 1px solid #e2e8f0; }
.modal-info-box.red   { background: #fef2f2; border: 1px solid #fca5a5; }
.modal-info-box.amber { background: #fef3c7; border: 1px solid #fcd34d; }

html.dark-mode .modal-info-box.green { background: #064e3b !important; border-color: #065f46 !important; }
html.dark-mode .modal-info-box.gray  { background: #1f2937 !important; border-color: #374151 !important; }
html.dark-mode .modal-info-box.red   { background: #450a0a !important; border-color: #7f1d1d !important; }
html.dark-mode .modal-info-box.amber { background: #451a03 !important; border-color: #78350f !important; }

/* ===== 代码框 ===== */
.modal-code-box.blue  { color: #2563eb; background: #eff6ff; border: 1px dashed #bfdbfe; }
.modal-code-box.red   { color: #dc2626; background: #ffffff; border: 1px dashed #fca5a5; }
.modal-code-box.amber { color: #b45309; background: #fffbeb; border: 1px dashed #fcd34d; }

html.dark-mode .modal-code-box.blue  { background: #182232 !important; border-color: #374151 !important; color: #60a5fa !important; }
html.dark-mode .modal-code-box.red   { background: #182232 !important; border-color: #7f1d1d !important; color: #f87171 !important; }
html.dark-mode .modal-code-box.amber { background: #1f1408 !important; border-color: #78350f !important; color: #fbbf24 !important; }

html.dark-mode .modal-field.amber-field { color: #fde68a !important; }
html.dark-mode .modal-desc.amber-desc   { color: #fbbf24 !important; }

/* ===== 确认弹窗正文 ===== */
html.dark-mode .modal-box.modal-xs .modal-body-text { color: #cbd5e1 !important; }

/* ============================================================
 * 5) 密码可见性切换
 * ============================================================ */
.password-wrapper { position: relative; width: 100%; }
.password-wrapper input { width: 100%; box-sizing: border-box; padding-right: 40px !important; }
.toggle-password {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    cursor: pointer; font-size: 16px; user-select: none;
    opacity: 0.6; transition: opacity 0.2s;
}
.toggle-password:hover { opacity: 1; }