/* ============================================
   伏尔加服务 · 全局基础样式入口
   使用 @import 按组件拆分
   ============================================ */

@import './base/variables.css';
@import './base/reset.css';
@import './components/nav.css';
@import './components/mobile-nav.css';
@import './components/card.css';
@import './components/form.css';
@import './components/modal.css';
@import './layouts/grid.css';
@import './utilities.css';

/* ============================================
   以下样式保留在 base.css 中作为入口文件的一部分
   ============================================ */

/* ===== Heading Hierarchy ===== */
.page-content h1 { font-size:1.5rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.02em; }
.page-content h2 { font-size:1.2rem; font-weight:600; margin-bottom:6px; }
.page-content h3 { font-size:1rem; font-weight:600; margin-bottom:4px; color:var(--text-secondary); }

/* ===== 禁止随意选中文字（输入框/文本域/代码块豁免） ===== */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input, textarea, [contenteditable], select, code, pre {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ===== 防止自然点击选中文本（交互元素） ===== */
.btn, button, .header-nav a, .header-user, .header-icon-btn, .header-notif-bell,
.pagination a, .tab, .status-badge, .role-badge, .category-badge,
.filter-tag, .filter-tag-close, .msg-type-badge, .action-badge, .method-badge,
.post-status, .member-nav a, .header-user-dropdown a,
.skip-link, .copy-trigger, .online-dot { user-select: none; }

/* ===== 表格 ===== */
.table-responsive { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
th {
    text-align: left;
    padding: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
}
td {
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
}
tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
[data-theme="dark"] tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
tr:hover td {
    background: var(--accent-soft);
}

/* ===== Table Cell Truncation ===== */
td.cell-truncate { max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
td.cell-mono { font-family:var(--font-mono); font-size:0.8rem; }
td.cell-time { font-family:var(--font-mono); font-size:0.78rem; color:var(--text-secondary); white-space:nowrap; }

/* ===== Focus Visible ===== */
:focus-visible {
    outline: 2px solid var(--accent, #4f46e5);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent, #4f46e5);
    outline-offset: 2px;
}
.skip-link:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 99999;
    padding: 12px 20px;
    background: var(--accent, #4f46e5);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    outline: 3px solid var(--accent-hover, #4338ca);
    outline-offset: 2px;
}

/* ===== 状态标签 ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-badge.active {
    background: var(--green-soft);
    color: var(--green);
}
.status-badge.inactive {
    background: var(--red-soft);
    color: var(--red);
}
.status-badge.pending {
    background: var(--orange-soft);
    color: var(--orange);
}

/* ===== 分页 ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
}
.pagination a, .pagination span {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.pagination a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.pagination .current {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}
.pagination .page-ellipsis { padding:0 4px; color:var(--text-muted); font-size:0.78rem; }
@media (max-width:480px) { .pagination a,.pagination span { padding:6px 8px; font-size:0.7rem; } .pagination .page-jump { display:none; } }

/* ===== 消息提示 ===== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 0.875rem;
}
.alert-success {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}
.alert-error {
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid var(--red-border);
}
.alert-info {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(79, 70, 229, 0.2);
}

/* ===== 标签页 ===== */
.tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
}
.tab {
    padding: 10px 20px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* 等级徽章（V9 积分体系） */
.lv-badge { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 0.62rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #818cf8, #6366f1); vertical-align: 1px; }


/* V12 错误页移动端适配 */
@media (max-width: 640px) {
  .error-code { font-size: 4.5rem !important; }
  .error-title { font-size: 1.15rem !important; }
  .error-desc { font-size: 0.85rem; }
}


/* V26：设置页统一卡片（对齐 SPA 个人主页风格，hero 大图移除后简洁头部） */
.settings-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.settings-section h3 {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.archive-main .header h1 { font-size: 1.3rem; }
/* ============================================
   V26 UI 统一优化：大气留白 / 文字可选中 / 容器限宽
   ============================================ */
/* 1. 允许选中正文（此前全局禁选，无法复制内容——修复反人类） */
body { -webkit-user-select: auto; user-select: auto; }
button, .btn, .tab-btn, .badge, .tag, .msg-avatar, .chat-online-dot, .fab-main, .fab-icon, .nav-icon, .lightbox-close, .lb-prev, .lb-next { -webkit-user-select: none; user-select: none; }

/* 2. 容器限宽居中（大屏不铺满，内容聚焦） */
.archive-main .container { max-width: 1200px; margin: 0 auto; }

/* 3. 页面标题层级（大气：大标题 + 克制副标 + 柔和分隔） */
.archive-main .header h1 { font-size: 1.9rem; letter-spacing: -0.02em; }
.archive-main .header .subtitle { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.14em; margin-top: 4px; }
.archive-main .divider { margin: 18px 0 30px; border-color: var(--border-light); }

/* 4. 正文可读性（行高） */
.archive-main p, .doc-content, .post-content { line-height: 1.75; }
.settings-section, .profile-card { box-shadow: var(--shadow-sm); }

/* 5. 列表/卡片呼吸间距（不臃肿） */
.archive-main .list-item, .archive-main .post-item { padding: 14px 18px; }
.gallery-container, .chat-container, .msg-page, .fr-page, .rx-page, .bl-page { max-width: 1100px; margin: 0 auto; }

/* 6. 移动端收紧 */
@media (max-width: 768px) {
  .archive-main { padding: 80px 14px 40px; }
  .archive-main .header h1 { font-size: 1.5rem; }
}

/* V28-B8: 评论楼层 / 楼主徽章 */
.comment-op-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--accent-soft, rgba(79, 70, 229, 0.1));
  white-space: nowrap;
}
.comment-op-badge.author {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-to, #7c3aed));
}

/* V28-B13: 设置页主题定时 */
.schedule-times { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.schedule-times input[type="time"] {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--input-bg); color: var(--text); font-size: 0.82rem;
}
.schedule-times input[type="time"]:focus { outline: none; border-color: var(--accent); }
.schedule-sep { font-size: 0.75rem; color: var(--text-muted); }
/* ============================================
   V42: 站点/个人背景层（fixed 背景图 + 透明度 + 模糊 + 暗化）
   使用 body::before 负 z-index 技巧：绘制在 body 背景之上、内容之下
   ============================================ */
body {
    --bg-img-url: none;
    --bg-img-opacity: 1;
    --bg-img-blur: 0px;
    --bg-overlay: rgba(0, 0, 0, 0);
    --bg-attachment: fixed;
}
/* 背景层定位：fixed=固定视口，scroll=跟随内容（背景图附着 + 层定位都由 --bg-attachment 决定） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--bg-img-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: var(--bg-attachment);
    opacity: var(--bg-img-opacity);
    filter: blur(var(--bg-img-blur));
    box-shadow: inset 0 0 0 9999px var(--bg-overlay);
}
/* V84-fix：scroll 模式背景层跟随内容滚动（避免内容长于视口时底部露白） */
body[data-bg-scroll="true"]::before {
    position: absolute;
    min-height: 100%;
}

/* V42: 背景引导卡片（右下角，非弹窗不拦截操作） */
.bg-guide-card {
    position: fixed;
    right: 16px;
    bottom: 72px;
    z-index: 99997;
    width: 300px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    padding: 16px;
    font-size: 0.84rem;
    color: var(--text);
}
.bg-guide-card h4 { margin: 0 0 6px; font-size: 0.95rem; }
.bg-guide-card p { margin: 0 0 12px; color: var(--text-secondary); line-height: 1.7; }
.bg-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bg-guide-actions .btn { flex: 1; white-space: nowrap; }

/* V42: 背景设置预览区 */
.bg-preview-box {
    width: 100%;
    height: 120px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background-image: var(--bg-img-url);
    background-size: cover;
    background-position: center;
    background-color: var(--bg);
    opacity: var(--bg-img-opacity);
    filter: blur(var(--bg-img-blur));
    box-shadow: inset 0 0 0 9999px var(--bg-overlay);
    margin: 10px 0;
}
.bg-range-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.bg-range-row label { width: 64px; flex-shrink: 0; font-size: 0.8rem; color: var(--text-secondary); }
.bg-range-row input[type="range"] { flex: 1; }
.bg-range-row output { width: 44px; text-align: right; font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ===== 回到顶部（V43: 从 main.css 迁移，SSR 页面未加载 spa.css 导致无样式） ===== */
.back-to-top {
    position: fixed; bottom: 32px; right: 32px; z-index: 9998;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent, #4f46e5); color: #fff; border: none;
    font-size: 1.25rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s, opacity 0.25s;
    opacity: 0; transform: translateY(20px) scale(0.8);
    pointer-events: none;
}
.back-to-top.show {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover { transform: scale(1.1); }
@media (max-width: 768px) {
    /* V95 P1-3：移动端命中区由 38px 提到 44px（移动端推荐值）。
       实测 38×38 略小于可舒适点击的下限，且与底部导航同屏时更难点中。 */
    .back-to-top { bottom: calc(76px + env(safe-area-inset-bottom)); right: 20px; width: 44px; height: 44px; font-size: 1.05rem; }
}

/* ============================================
   V45: 移动端加固层（系统性修复小屏显示问题）
   针对：内容截断/空白、触控目标过小、字体过小
   ============================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    width: 100%;
}
/* 防止任何子元素把页面撑宽 */
img, video, canvas, table, iframe, pre {
    max-width: 100% !important;
    height: auto;
}
table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 移动端字号最小 14px（防浏览器自动缩放导致布局错乱） */
@media (max-width: 768px) {
    body { font-size: 14px; }
    input, select, textarea, button { font-size: 16px !important; }
    /* 触控目标最小 40px */
    .btn, .sidebar-nav a, .header-icon-btn, .header-nav a,
    .pagination a, .tab, .filter-tag, .post-card, .list-item, a.btn {
        min-height: 40px;
        min-width: 40px;
    }
    /* 防止长内容溢出 */
    .post-content, .comment-content, .doc-content, .ann-content {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .table-responsive {
        margin: 0 -16px;
        padding: 0 16px;
        width: calc(100% + 32px);
    }
}
/* 内容区横向滚动兜底 */
.spa-main, .archive-main, .member-content, .container {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* V64: 页面过渡 — SSR 原生 view-transition 命名区域（meta 标签已在 _layout.html） */
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
::view-transition-old(root) { animation: vt-fade-out 0.15s ease-in; }
::view-transition-new(root) { animation: vt-fade-in 0.25s ease-out; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01ms; }
}
/* V77: Quill 富文本移动端适配 */
@media (max-width: 768px) {
    .ql-toolbar.ql-snow {
        position: sticky;
        top: 56px;
        z-index: 50;
        background: var(--card-bg, #fff);
        border-left: none;
        border-right: none;
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        padding: 6px 4px;
    }
    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 4px;
    }
    .ql-container.ql-snow {
        font-size: 16px; /* 移动端避免 iOS 聚焦缩放 */
        min-height: 240px;
    }
}