/* ============================================================
   清染导航 · 全站通用组件皮肤
   ------------------------------------------------------------
   配合 css/theme.css 使用（令牌都在那里定义）。
   给子页面（课表 / 笔记 / 留言板 / 工具 / 后台 / 文件页）统一
   赛博朋克暗色质感：面板、表格、表单、按钮、徽章、代码块、滚动条。

   引入顺序：style.css → theme.css → ui.css → （页面自己的样式）
   ============================================================ */

/* ============================================================
   1. 基础排版
   ============================================================ */
body {
    color: var(--h-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--h-text);
    font-weight: 700;
    letter-spacing: -0.2px;
}

p, li, td, label {
    color: var(--h-text);
}

a {
    color: var(--h-accent);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--h-accent-2);
}

small, .muted, .text-muted, .subtitle, .desc {
    color: var(--h-dim);
}

hr {
    border: none;
    border-top: 1px solid var(--h-border);
    margin: 18px 0;
}

::selection {
    background: var(--h-accent-soft);
    color: var(--h-text);
}

/* ============================================================
   2. 面板 / 卡片
   ============================================================ */
.card,
.panel,
.box,
.section,
.comment-form-card,
.comments-page > *,
.preview-section,
.week-container,
.schedule-container,
.container-card {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    box-shadow: inset 0 1px 0 var(--h-sheen);
}

.card,
.panel,
.comment-form-card {
    padding: 20px;
}

/* 页面主容器（课表页等用的 .container 与首页的不同名，避免互相影响） */
.page-wrap,
.wrap,
.main-container {
    border-radius: var(--h-radius);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
}

/* ============================================================
   3. 表格（课表 / 后台列表）
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    color: var(--h-text);
}

th {
    background: var(--h-surface-2);
    color: var(--h-accent);
    font-weight: 600;
    border-bottom: 1px solid var(--h-border);
}

td {
    border-bottom: 1px solid var(--h-border);
}

tbody tr {
    transition: background 0.2s ease;
}

tbody tr:hover {
    background: var(--h-surface-2);
}

/* ============================================================
   4. 表单控件
   ============================================================ */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='date'],
input[type='url'],
textarea,
select {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--h-radius-sm);
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--h-dim);
    opacity: 0.8;
}

input:focus,
textarea:focus,
select:focus {
    background: var(--h-surface);
    border-color: var(--h-accent);
    box-shadow: 0 0 0 4px var(--h-accent-soft);
}

select option {
    background: var(--h-bg2);
    color: var(--h-text);
}

input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--h-accent);
    width: auto;
}

/* ============================================================
   5. 按钮
   ============================================================ */
button,
.btn,
.button,
.download-btn,
.primary-btn,
.submit-btn {
    padding: 10px 18px;
    border-radius: var(--h-radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    color: var(--h-text);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

button:hover,
.btn:hover,
.button:hover,
.download-btn:hover,
.primary-btn:hover,
.submit-btn:hover {
    transform: translateY(-1px);
    border-color: var(--h-border-strong);
}

/* 主按钮 */
.btn-primary,
.primary-btn,
.submit-btn,
button[type='submit'],
.download-btn {
    color: #fff;
    background: linear-gradient(135deg, var(--h-accent), var(--h-accent-2));
    border-color: transparent;
}

.btn-primary:hover,
.primary-btn:hover,
.submit-btn:hover,
button[type='submit']:hover,
.download-btn:hover {
    color: #fff;
    filter: brightness(1.08);
}

/* 危险按钮 */
.btn-danger,
.danger-btn,
.delete-btn,
button.danger {
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #b91c1c);
    border-color: transparent;
}

/* ============================================================
   6. 徽章 / 标签
   ============================================================ */
.badge,
.tag,
.card-tag,
.chip,
.pill,
.label-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--h-accent);
    background: var(--h-accent-soft);
    border: 1px solid var(--h-border);
}

.badge-success,
.status-approved {
    color: #34d399;
    background: rgba(52, 211, 153, 0.14);
}

.badge-warning,
.status-pending {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
}

.badge-danger,
.status-rejected {
    color: #f87171;
    background: rgba(248, 113, 113, 0.14);
}

/* ============================================================
   7. 代码块
   ============================================================ */
code {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.88em;
    font-family: ui-monospace, Consolas, 'Courier New', monospace;
    color: var(--code-color);
    background: var(--code-bg);
}

pre {
    padding: 16px 18px;
    border-radius: var(--h-radius-sm);
    overflow-x: auto;
    font-family: ui-monospace, Consolas, 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--code-color);
    background: var(--code-bg);
    border: 1px solid var(--h-border);
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
}

/* ============================================================
   8. 提示条
   ============================================================ */
.notice,
.alert,
.tip,
.info-box,
.note {
    padding: 12px 16px;
    border-radius: var(--h-radius-sm);
    font-size: 0.86rem;
    color: var(--h-text);
    background: var(--h-accent-soft);
    border: 1px solid var(--h-border);
    border-left: 3px solid var(--h-accent);
}

.alert-error,
.error-msg {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.12);
    border-left-color: #f87171;
}

/* ============================================================
   9. 弹层
   ============================================================ */
.modal,
.modal-content,
.dialog {
    background: var(--h-glass);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    color: var(--h-text);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}

.modal-overlay,
.overlay {
    background: rgba(3, 6, 14, 0.6);
    backdrop-filter: blur(4px);
}

/* ============================================================
   10. 页面顶栏 / 返回链接
   ============================================================ */
.back-link,
.back-btn,
.home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.84rem;
    color: var(--h-dim);
    background: var(--h-surface-2);
    border: 1px solid var(--h-border);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.back-link:hover,
.back-btn:hover,
.home-link:hover {
    color: var(--h-text);
    background: var(--h-accent-soft);
    border-color: var(--h-border-strong);
}

/* ============================================================
   11. 主题面板 / 移动端抽屉（子页面同样适用）
   ============================================================ */
.theme-palette-panel {
    background: var(--h-glass);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
}

.theme-palette-title,
.theme-palette-label {
    color: var(--h-text);
}

.theme-palette-item {
    border-radius: var(--h-radius-sm);
    border: 1px solid transparent;
}

.theme-palette-item:hover,
.theme-palette-item.active {
    background: var(--h-surface-2);
    border-color: var(--h-accent-soft);
}

.nav-drawer {
    background: var(--h-glass);
    border-right: 1px solid var(--h-border);
}

.nav-drawer-header {
    color: var(--h-text);
    font-weight: 700;
}

.nav-drawer-item {
    border-radius: var(--h-radius-sm);
    color: var(--h-dim);
}

.nav-drawer-item:hover {
    color: var(--h-text);
    background: var(--h-surface-2);
}

/* ============================================================
   12. 细节
   ============================================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--h-border-strong);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--h-dim);
}

::placeholder {
    color: var(--h-dim);
}

/* 页脚统一 */
footer {
    color: var(--h-dim);
}

footer a,
.beian-info a {
    color: var(--h-dim);
}

footer a:hover,
.beian-info a:hover {
    color: var(--h-accent);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}