/* ============================================================
   组件样式补全（components.css）
   ------------------------------------------------------------
   用途：模板中已经使用、但项目里原先没有对应样式定义的结构类，
        在这里统一补齐。所有颜色都取自主题变量
        （--theme-* / --primary-gradient），因此 8 套主题、
        浅色 / 深色模式切换时表现一致，也保证文字对比度。

   覆盖范围：
     1. 通用工具类          2. 分页条
     3. 公告区域            4. 广告位
     5. 列表项文本色阶      6. 页面区域标题 / 后台页头
     7. 用户中心卡片        8. 记事本 / 导航 / 其它结构钩子
     9. 深色模式兜底
   ============================================================ */

/* ---------- 1. 通用工具类 ---------- */
.min-w-0 { min-width: 0 !important; }
.w-full  { width: 100% !important; }

/* ---------- 2. 分页条（文章 / 网址 / 记事本列表共用） ---------- */
.pagination-container {
    flex-wrap: wrap;
    row-gap: .5rem;
}
.page-info {
    font-size: .85rem;
    color: var(--theme-text-secondary, #3f4a5a);
    white-space: nowrap;
}
.current-page {
    font-weight: 700;
    color: var(--theme-primary, #4f46e5);
}
.total-pages {
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}

/* ---------- 3. 公告区域 ---------- */
.announcement-bar {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}
.announcement-bar .announcement-item {
    color: var(--theme-text-primary, #0f172a);
}
.announcement-title {
    color: var(--theme-text-primary, #0f172a);
}
.announcement-content {
    color: var(--theme-text-secondary, #3f4a5a);
}

/* ---------- 4. 广告位 ---------- */
.ad-slot.ad-pc-top,
.ad-slot.ad-mobile-top    { margin-top: .75rem; }
.ad-slot.ad-pc-bottom,
.ad-slot.ad-mobile-bottom { margin-bottom: .75rem; }

/* ---------- 5. 列表项文本色阶（后台管理 + 用户中心共用） ---------- */
.cat-name,
.art-cat-name {
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}
.cat-desc {
    font-weight: 400;
    background: var(--theme-bg-tertiary, #e2e8f0) !important;
    color: var(--theme-text-secondary, #3f4a5a) !important;
}
.article-title {
    font-weight: 500;
    color: var(--theme-text-primary, #0f172a);
}
.article-desc {
    color: var(--theme-text-secondary, #3f4a5a);
}
.link-count,
.article-count {
    font-weight: 600;
}
.link-clicks,
.article-clicks {
    font-variant-numeric: tabular-nums;
}
/* 列表容器只作为插入点，保证不撑破栅格 */
.links-container,
.articles-container,
.notebook-list-container,
.article-grid-container,
.item-grid-container,
.category-manage-card {
    min-width: 0;
}

/* ---------- 6. 页面区域标题 / 后台页头 ---------- */
.page-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}
.page-section-title i {
    color: var(--theme-primary, #4f46e5);
}
.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border, #e5e7eb);
}
.admin-page-header h1,
.admin-page-header h2,
.admin-page-header h3,
.admin-page-header h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}
.admin-page-header .text-muted,
.admin-page-header small {
    color: var(--theme-text-muted, #5b6470) !important;
}

/* ---------- 7. 用户中心卡片 ---------- */
.user-panel-card,
.user-entry-card,
.user-sidebar-card {
    background: var(--theme-card-bg, #fff) !important;
    border: 1px solid var(--theme-border-light, #e8ecf1) !important;
    color: var(--theme-text-primary, #0f172a);
    border-radius: 16px;
}
.user-entry-card {
    transition: var(--theme-transition, all .25s ease);
}
.user-entry-card:hover {
    border-color: var(--theme-primary, #4f46e5) !important;
    box-shadow: var(--theme-shadow-md, 0 4px 12px rgba(0, 0, 0, .08));
    transform: translateY(-2px);
}
/* 头像条：沿用主题渐变，文字固定白色以保证对比度 */
.user-welcome-banner,
.user-sidebar-cover {
    background: var(--primary-gradient) !important;
    color: #fff;
}
.user-welcome-banner *,
.user-sidebar-cover * {
    color: inherit;
}
/* 入口图标：形状统一，颜色仍由各页面自身的强调色决定（已改为主题变量） */
.entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.vip-status-panel {
    border: 1px solid var(--theme-border-light, #e8ecf1);
    color: var(--theme-text-primary, #0f172a);
}
.user-usage-grid {
    color: var(--theme-text-secondary, #3f4a5a);
}

/* ---------- 8. 其它结构钩子 ---------- */
/* 记事本颜色块（颜色由 JS 以内联方式设置，这里只统一形状） */
[class*="notebook-color-"] {
    border-radius: 6px;
}
/* 移动端整行主题切换按钮 */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
}
/* 后台侧边栏遮罩（移动端展开时）
   ⚠ z-index 必须低于 .admin-sidebar（1000）、高于 .admin-topbar（100）：
   遮罩一旦压住侧栏，手机端点汉堡后侧栏会被半透明遮罩整个盖住，
   点击全部落到遮罩上并立刻把侧栏关掉，表现为"菜单打不开、点不了"。 */
.admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.admin-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ---------- 9. 深色模式兜底 ---------- */

/* 9.1 内联浅色底 → 深色底
   视图里用内联 style 写死的浅色底（彩色小卡片 / 提示块）在深色模式下
   会变成"浅底 + 浅字"而看不清，这里统一换成次级底色 + 前景文字色。 */
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#f8fafc"],
[data-bs-theme="dark"] [style*="background: #f8fafc"],
[data-bs-theme="dark"] [style*="background:#f5f5f5"],
[data-bs-theme="dark"] [style*="background: #f5f5f5"],
[data-bs-theme="dark"] [style*="background:#eef2ff"],
[data-bs-theme="dark"] [style*="background: #eef2ff"],
[data-bs-theme="dark"] [style*="background:#ecfdf5"],
[data-bs-theme="dark"] [style*="background: #ecfdf5"],
[data-bs-theme="dark"] [style*="background:#eff6ff"],
[data-bs-theme="dark"] [style*="background: #eff6ff"],
[data-bs-theme="dark"] [style*="background:#f0fdf4"],
[data-bs-theme="dark"] [style*="background: #f0fdf4"],
[data-bs-theme="dark"] [style*="background:#f0f9ff"],
[data-bs-theme="dark"] [style*="background: #f0f9ff"],
[data-bs-theme="dark"] [style*="background:#f0fff4"],
[data-bs-theme="dark"] [style*="background: #f0fff4"],
[data-bs-theme="dark"] [style*="background:#f5f3ff"],
[data-bs-theme="dark"] [style*="background: #f5f3ff"],
[data-bs-theme="dark"] [style*="background:#ede9fe"],
[data-bs-theme="dark"] [style*="background: #ede9fe"],
[data-bs-theme="dark"] [style*="background:#fdf2f8"],
[data-bs-theme="dark"] [style*="background: #fdf2f8"],
[data-bs-theme="dark"] [style*="background:#fce7f3"],
[data-bs-theme="dark"] [style*="background: #fce7f3"],
[data-bs-theme="dark"] [style*="background:#fff0f5"],
[data-bs-theme="dark"] [style*="background: #fff0f5"],
[data-bs-theme="dark"] [style*="background:#fff5f5"],
[data-bs-theme="dark"] [style*="background: #fff5f5"],
[data-bs-theme="dark"] [style*="background:#fef2f2"],
[data-bs-theme="dark"] [style*="background: #fef2f2"],
[data-bs-theme="dark"] [style*="background:#fef3c7"],
[data-bs-theme="dark"] [style*="background: #fef3c7"],
[data-bs-theme="dark"] [style*="background:#fffbeb"],
[data-bs-theme="dark"] [style*="background: #fffbeb"],
[data-bs-theme="dark"] [style*="background:#fffaf0"],
[data-bs-theme="dark"] [style*="background: #fffaf0"] {
    background-color: var(--theme-bg-secondary) !important;
    background-image: none !important;
    color: var(--theme-text-primary) !important;
}

/* 9.2 内联深色文字 → 提亮（浅底被换成深底后，深字会看不清） */
[data-bs-theme="dark"] [style*="color:#065f46"],
[data-bs-theme="dark"] [style*="color: #065f46"],
[data-bs-theme="dark"] [style*="color:#92400e"],
[data-bs-theme="dark"] [style*="color: #92400e"],
[data-bs-theme="dark"] [style*="color:#0f172a"],
[data-bs-theme="dark"] [style*="color: #0f172a"] {
    color: var(--theme-text-primary) !important;
}

/* 9.3 内联强调色 → 主题语义色（深色模式下自动变亮，保证可见） */
[data-bs-theme="dark"] [style*="color:#4f46e5"],
[data-bs-theme="dark"] [style*="color: #4f46e5"],
[data-bs-theme="dark"] [style*="color:#5b5bd6"],
[data-bs-theme="dark"] [style*="color:#2563eb"] {
    color: var(--theme-primary) !important;
}
[data-bs-theme="dark"] [style*="color:#059669"],
[data-bs-theme="dark"] [style*="color: #059669"],
[data-bs-theme="dark"] [style*="color:#16a34a"],
[data-bs-theme="dark"] [style*="color:#10b981"],
[data-bs-theme="dark"] [style*="color:#11998e"] {
    color: var(--theme-success) !important;
}
[data-bs-theme="dark"] [style*="color:#d97706"],
[data-bs-theme="dark"] [style*="color: #d97706"],
[data-bs-theme="dark"] [style*="color:#f59e0b"] {
    color: var(--theme-warning) !important;
}
[data-bs-theme="dark"] [style*="color:#db2777"],
[data-bs-theme="dark"] [style*="color:#dc2626"],
[data-bs-theme="dark"] [style*="color:#f5576c"] {
    color: var(--theme-danger) !important;
}

/* ---------- 10. 移动端微调 ---------- */
@media (max-width: 768px) {
    .page-section-title { font-size: .95rem; }
    .admin-page-header { gap: .5rem; margin-bottom: 1rem; }
}

/* ---------- 11. 死链标记（check_status=2 自动检测失效） ---------- */
.url-card-dead .url-title,
.url-card-dead .url-desc,
.url-card-dead .url-img img,
.url-card-dead .url-img .url-svg,
.url-card-dead .url-img .fallback-icon {
    opacity: .45;
    filter: grayscale(1);
}
.url-card-dead::after {
    content: "失效";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: .6rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--theme-danger, #dc3545);
    color: #fff;
    opacity: .85;
    pointer-events: none;
}
tr.dead-link-row .link-title { opacity: .55; }