/* 多皮肤 - 右上角切换，默认浅色 */

/* 深色 · 运维 */
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #050814;
    --bg-card: #0e172a;
    --bg-elevated: #141e32;
    --bg-soft: #101a2f;
    --border: #243552;
    --text: #e8f0ff;
    --text-muted: #7f8fb0;
    --primary: #00b5ff;
    --primary-hover: #27c5ff;
    --success: #3fb950;
    --error: #f85149;
    --warn: #f0b429;
    /* 深色底上投影要更重才看得出分层，所以三档在这里整体加深，
       但档位语义与浅色一致（贴边/抬起/浮层），组件侧不用区分主题。 */
    --shadow-1: 0 1px 3px rgba(0,0,0,.5);
    --shadow-2: 0 6px 18px rgba(0,0,0,.55);
    --shadow-3: 0 16px 40px rgba(0,0,0,.65);
    /* 操作列色板在深色底上要提亮，否则 12% 透明度的底色几乎看不见 */
    --act-neutral: #2dd4bf;
    --act-info: #818cf8;
    --shadow: var(--shadow-1);
    --shadow-card: var(--shadow-2);
    --glass: rgba(4,14,40,.88);
    --control-bg: #0b1324;
    --focus-ring: 0 0 0 3px rgba(0,181,255,.2);
}

[data-theme="dark"] body { background: linear-gradient(180deg, #050814 0%, #0b1530 100%); }
[data-theme="dark"] .app-header { backdrop-filter: blur(12px); }
[data-theme="dark"] .tab { color: var(--text-muted); }
[data-theme="dark"] .tab.active { color: var(--text); background: var(--border); }
[data-theme="dark"] .tab.active:hover { color: var(--text); }
/* 深色主题：上传文件控件与次要按钮可读、协调 */
[data-theme="dark"] input[type="file"] {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}
[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
    background: var(--border);
    color: var(--text);
    border: none;
    padding: var(--space-2) var(--space-3);
    margin-right: 0.5rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
}
[data-theme="dark"] .btn-secondary {
    background: #1e2d47;
    color: #e8f0ff;
    border: 1px solid #243552;
}
[data-theme="dark"] .btn-secondary:hover {
    background: #243552;
    color: #e8f0ff;
}
/* 例外：表格操作列里的 btn-secondary 是「次要操作＝青色」的语义色（style.css 的
   .device-actions .btn-secondary），与上面这条特异性相同但本文件后加载会把它压成灰。
   这里按语义色还原，保持操作列 编辑蓝/删除红/次要青 的全站一致。 */
[data-theme="dark"] .device-actions .btn-secondary {
    background: rgba(13, 148, 136, 0.12);
    color: var(--text);
    border: 1px solid transparent;
    border-left: 3px solid #0d9488;
}
[data-theme="dark"] .device-actions .btn-secondary:hover {
    background: rgba(13, 148, 136, 0.2);
    border-color: rgba(13, 148, 136, 0.35);
    border-left-color: #0d9488;
    color: var(--text);
}
/* 深色主题：筛选栏、每页条数的输入框/下拉与整体协调 */
[data-theme="dark"] .filters-bar input[type="text"],
[data-theme="dark"] .filters-bar select,
[data-theme="dark"] .devices-footer .per-page select,
[data-theme="dark"] .devices-toolbar select,
[data-theme="dark"] .config-devices-toolbar input[type="text"],
[data-theme="dark"] .config-devices-toolbar select,
[data-theme="dark"] .backup-jobs-toolbar select {
    background: #141e32;
    color: #e8f0ff;
    border: 1px solid #243552;
}
[data-theme="dark"] .filters-bar input[type="text"]::placeholder {
    color: #7f8fb0;
}

/* 浅色 · 专业（与 Apple 接近，偏灰） */
[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f8fa;
    --bg-card: #ffffff;
    --bg-elevated: #f0f2f5;
    --bg-soft: #eef2f7;
    --border: #d0d7de;
    --text: #1f2328;
    --text-muted: #656d76;
    --primary: #0969da;
    --primary-hover: #0550ae;
    --success: #1a7f37;
    --error: #cf222e;
    --warn: #9a6700;
    --shadow: 0 1px 3px rgba(0,0,0,.08);
    --shadow-card: 0 4px 20px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06);
    --glass: rgba(255,255,255,.9);
    --control-bg: #ffffff;
    --focus-ring: 0 0 0 3px rgba(9,105,218,.16);
}