/* ==========================================================================
   theme.css — 主题相关通用组件样式（注意：CSS 变量由 ThemeManager 统一管理）
   --------------------------------------------------------------------------
   包含：
     1. 滚动条美化（依赖 --scrollbar-track / --scrollbar-thumb，
        若 ThemeManager 未注入则回退到 theme.css 内默认值）
     2. 主题切换按钮 .theme-toggle / [data-theme-toggle]
     3. 汉堡菜单按钮 .hamburger-btn
     4. 侧栏遮罩层 .sidebar-overlay
     5. 移动端侧栏 overlay 模式：body.mobile-sidebar-open
   ========================================================================== */

/* ---------- 变量兜底：暗色(song)/亮色(ya)主题常用色（若尚未加载 ThemeManager 也能正常显示按钮基础样式） ---------- */
html:not([data-style-type="light"]) {
    --scrollbar-track:  rgba(10, 10, 18, 0.6);
    --scrollbar-thumb:  rgba(201, 163, 92, 0.35);
    --card-bg:          rgba(26, 26, 46, 0.6);
    --border-color:     rgba(245, 240, 225, 0.12);
    --gold:             #c9a35c;
    --gold-light:       #e5c483;
    --gold-glow:        rgba(201, 163, 92, 0.4);
    --text-dim:         rgba(245, 240, 225, 0.70);
    --text:             #f5f0e1;
    --overlay-bg:       rgba(10, 10, 18, 0.72);
}
html[data-style-type="light"] {
    --scrollbar-track:  rgba(247, 243, 233, 0.8);
    --scrollbar-thumb:  rgba(160, 118, 46, 0.35);
    --card-bg:          rgba(255, 255, 255, 0.88);
    --border-color:     rgba(156, 61, 46, 0.14);
    --gold:             #a0762e;
    --gold-light:       #c4965a;
    --gold-glow:        rgba(196, 150, 90, 0.22);
    --text-dim:         rgba(43, 24, 16, 0.70);
    --text:             #2b1810;
    --overlay-bg:       rgba(43, 24, 16, 0.50);
}

/* ---------- 全局滚动条美化 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: var(--scrollbar-track); border-radius: 4px; }
::-webkit-scrollbar-thumb   { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { opacity: 0.7; }

/* ---------- 主题切换按钮（快速切换：宋韵 ↔ 雅致） ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--gold);
    color: var(--gold-light);
    box-shadow: 0 0 0 3px var(--gold-glow);
    outline: none;
}
.theme-toggle .theme-icon { font-size: 15px; line-height: 1; }
.theme-toggle .theme-label { font-size: 12px; letter-spacing: 0.5px; }
.theme-toggle.active {
    border-color: var(--gold);
    color: var(--gold-light);
}

/* ---------- 汉堡菜单按钮（仅移动端显示，≥992px 隐藏） ---------- */
.hamburger-btn {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 210;
    line-height: 1;
}
.hamburger-btn:active { transform: scale(0.94); }
.hamburger-btn:hover,
.hamburger-btn:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
    outline: none;
}
@media (max-width: 991.98px) {
    .hamburger-btn { display: inline-flex; }
}

/* ---------- 侧栏遮罩层（仅移动端打开时显示） ---------- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.is-open {
    display: block;
    opacity: 1;
}

/* ---------- 移动端：侧栏 overlay 模式（经验：不用 margin-left 推开，用 translate 覆盖） ---------- */
@media (max-width: 991.98px) {
    /* 侧栏默认移出屏幕，body.mobile-sidebar-open 时移回 */
    .sidebar {
        transform: translateX(-108%);
        transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
        width: min(86vw, 320px) !important;
        max-width: none !important;
    }
    body.mobile-sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 30px rgba(0, 0, 0, 0.28);
    }
    /* 主内容区：移动端取消侧栏留白（无论侧栏是否打开都不推开） */
    .main-content,
    .main-content-area,
    .content-wrapper {
        margin-left: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ---------- 主题切换过渡效果 ---------- */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease !important;
}

/* ---------- 防止 iOS 输入框放大：确保表单最小 16px ---------- */
@media (max-width: 991.98px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ---------- 轻量响应式：小屏 padding 收敛（兼容尚未加 r- 前缀工具类的页面） ---------- */
@media (max-width: 991.98px) {
    .top-header { flex-wrap: wrap; gap: 12px; }
    .top-actions { margin-left: auto; }
    .stat-cards { gap: 12px !important; margin-bottom: 20px !important; }
    .stat-card { padding: 16px !important; }
    .main-content { padding: 20px 16px !important; }
    .top-header { padding-bottom: 16px; margin-bottom: 20px; }
    .page-title h1 { font-size: 22px !important; margin-bottom: 6px !important; letter-spacing: 1px !important; }
    .page-title p { font-size: 12px !important; }
}
@media (max-width: 479.98px) {
    .action-btn { width: 40px; height: 40px; font-size: 14px; }
    .top-actions { gap: 8px !important; }
}

/* ---------- sidebar-overlay 双 class 兼容 ---------- */
.sidebar-overlay.show,
.sidebar-overlay.is-open { display: block; opacity: 1; }

/* ---------- 公开页（welcome/服务页）导航：移动端响应式 ---------- */
@media (max-width: 991.98px) {
    .top-bar .nav-content { gap: 10px; flex-wrap: wrap; padding: 12px 0 !important; }
    .top-bar .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(86vw, 320px);
        height: 100vh;
        background: var(--ink-surface, #1a1a2e);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 80px 20px 24px 20px;
        gap: 8px;
        transform: translateX(108%);
        transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
        z-index: 105;
        border-left: 1px solid var(--text-ghost, rgba(245,240,225,0.12));
        box-shadow: -8px 0 28px rgba(0,0,0,0.30);
        display: flex;
    }
    .top-bar .main-nav.mobile-nav-open {
        transform: translateX(0);
    }
    .top-bar .main-nav a {
        padding: 14px 16px;
        border-radius: 10px;
        text-align: left;
        width: 100%;
        border: 1px solid transparent;
        color: var(--text, #f5f0e1);
    }
    .top-bar .main-nav a:hover,
    .top-bar .main-nav a:focus-visible {
        background: var(--text-ghost, rgba(245,240,225,0.08));
        border-color: var(--gold, #c9a35c);
    }
    .top-bar .hamburger-btn { display: inline-flex; margin-left: auto; order: 10; }
    .top-bar .theme-toggle { margin-left: 8px; }
    .top-bar .nav-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }
    .top-bar .btn-nav-login,
    .top-bar .btn-nav-cta { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 575.98px) {
    .top-bar .logo .logo-icon { width: 40px; height: 40px; font-size: 20px; }
    .top-bar .logo .logo-text { font-size: 20px; }
    .top-bar .logo .logo-sub { font-size: 10px; }
}