/* ============================================
   Theme Customizer - CSS Variables + Overrides
   自动生成 - 所有用户可见
   修改此文件将实时影响网站外观
   ============================================ */

:root {
  /* ---- 全局 ---- */
  --body-font-family: "Poppins", "Helvetica", sans-serif;
  --body-font-size: 15px;
  --body-bg-color: #f3f4f6;
  --body-color: #111111;

  /* ---- 主色调 ---- */
  --primary-color: #5e72e4;
  --primary-color-hover: #4d61cf;
  --secondary-color: #f7fafc;
  --success-color: #2dce89;
  --info-color: #11cdef;
  --warning-color: #fb6340;
  --danger-color: #f5365c;

  /* ---- 链接 ---- */
  --link-color: #5e72e4;
  --link-hover-color: #4d61cf;
  --link-decoration: none;

  /* ---- 排版 ---- */
  --h1-size: 2rem;
  --h2-size: 1.75rem;
  --h3-size: 1.5rem;
  --h4-size: 1.25rem;
  --h5-size: 1rem;
  --h6-size: 0.875rem;
  --line-height: 1.5;
  --paragraph-spacing: 1rem;

  /* ---- 标题 ---- */
  --header-bg-color: #ffffff;
  --header-height: 70px;
  --header-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --header-text-color: #111111;
  --header-nav-link-color: #555555;
  --header-nav-link-hover-color: #5e72e4;
  --header-nav-link-active-color: #5e72e4;
  --header-search-bg: #f3f4f6;
  --header-search-radius: 20px;
  --header-logo-height: 40px;

  /* ---- 侧边栏 ---- */
  --sidebar-position: left;
  --sidebar-width: 280px;
  --sidebar-bg: #ffffff;
  --sidebar-text-color: #555555;
  --sidebar-active-bg: rgba(94,114,228,0.1);
  --sidebar-active-color: #5e72e4;
  --sidebar-hover-bg: rgba(0,0,0,0.03);
  --sidebar-item-radius: 8px;
  --sidebar-item-padding: 10px 12px;
  --content-max-width: 1200px;

  /* ---- 按钮 ---- */
  --btn-radius: 8px;
  --btn-font-size: 13px;
  --btn-font-weight: 600;
  --btn-padding-y: 1rem;
  --btn-padding-x: 2.5rem;
  --btn-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08);
  --btn-primary-text: #ffffff;
  --btn-primary-bg: #5e72e4;
  --btn-primary-hover-bg: #4d61cf;
  --btn-success-text: #ffffff;
  --btn-success-bg: #2dce89;
  --btn-success-hover-bg: #26af74;
  --btn-info-text: #ffffff;
  --btn-info-bg: #11cdef;
  --btn-info-hover-bg: #0fb8d8;
  --btn-warning-text: #ffffff;
  --btn-warning-bg: #fb6340;
  --btn-warning-hover-bg: #e54d2a;
  --btn-danger-text: #ffffff;
  --btn-danger-bg: #f5365c;
  --btn-danger-hover-bg: #d91f45;
  --btn-light-text: #111111;
  --btn-light-bg: #f7fafc;
  --btn-light-hover-bg: #e9ecef;

  /* ---- 卡片 ---- */
  --card-bg: #ffffff;
  --card-radius: 12px;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.05);
  --card-header-bg: #fafafa;
  --card-header-color: #333333;
  --card-body-padding: 20px;

  /* ---- 圆角 ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ---- 阴影 ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  /* ---- 图标 ---- */
  --main-icon-color: #5e72e4;
  --header-icon-color: #111111;
  --action-icon-color: #111111;

  /* ---- 导航 ---- */
  --nav-pills-bg: #ffffff;
  --nav-pills-active-bg: #5e72e4;
  --nav-pills-active-color: #ffffff;

  /* ---- 输入框 ---- */
  --input-bg: #ffffff;
  --input-border: #dee2e6;
  --input-radius: 8px;
  --input-focus-shadow: 0 0 0 3px rgba(94,114,228,0.25);

  /* ---- 首页背景 ---- */
  --index-bg-color: #f3f4f6;
  --index-bg-image: none;
  --index-bg-video: none;
  --index-bg-size: cover;
  --index-bg-repeat: no-repeat;
  --index-bg-position: center;
  --index-overlay-opacity: 0;

  /* ---- 帖子 ---- */
  --post-bg: #ffffff;
  --post-header-color: #111111;
  --post-text-color: #333333;
  --post-action-color: #888888;

  /* ---- 评论 ---- */
  --comment-bg: #fafafa;
  --comment-text-color: #333333;
  --comment-border-color: #eeeeee;

  /* ---- 夜间模式 ---- */
  --body-bg-color-dark: #0f1419;
  --body-color-dark: #e7e9ea;
  --header-bg-color-dark: #1a1f24;
  --card-dark-bg: #1a1f24;
  --card-dark-divider: #2a3038;
  --card-dark-hover: #242a30;
  --card-dark-input: #0f1419;
  --card-dark-input-color: #eaeaea;

  /* ---- 过渡 ---- */
  --transition-speed: 0.2s;
}

/* ============================================
   Override Rules - 全局覆盖（所有用户可见）
   使用 html body 前缀 + !important 确保最高优先级
   ============================================ */

/* ---- 全局 body ---- */
html body {
  font-family: var(--body-font-family) !important;
  font-size: var(--body-font-size) !important;
  background-color: var(--body-bg-color) !important;
  color: var(--body-color) !important;
}

/* ---- 链接 ---- */
html body a,
html body a:link,
html body a:visited,
html body a:active {
  color: var(--link-color) !important;
  text-decoration: var(--link-decoration) !important;
}
html body a:hover {
  color: var(--link-hover-color) !important;
}

/* ---- 排版 ---- */
html body h1, html body .h1 { font-size: var(--h1-size) !important; }
html body h2, html body .h2 { font-size: var(--h2-size) !important; }
html body h3, html body .h3 { font-size: var(--h3-size) !important; }
html body h4, html body .h4 { font-size: var(--h4-size) !important; }
html body h5, html body .h5 { font-size: var(--h5-size) !important; }
html body h6, html body .h6 { font-size: var(--h6-size) !important; }
html body { line-height: var(--line-height) !important; }
html body p { margin-bottom: var(--paragraph-spacing) !important; }

/* ---- 主色调背景 ---- */
html body .bg-primary,
html body .badge-primary {
  background-color: var(--primary-color) !important;
}

/* ---- 主色调文字 ---- */
html body .text-primary,
html body .text-primary a {
  color: var(--primary-color) !important;
}

/* ---- 按钮 - Primary ---- */
html body .btn-primary,
html body .btn-primary.disabled,
html body .btn-primary:disabled,
html body .btn-primary:not(:disabled):not(.disabled).active,
html body .btn-primary:not(:disabled):not(.disabled):active,
html body .show > .btn-primary.dropdown-toggle {
  color: var(--btn-primary-text) !important;
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bg) !important;
  box-shadow: var(--btn-shadow) !important;
}
html body .btn-primary:hover,
html body .btn-primary:focus {
  background-color: var(--btn-primary-hover-bg) !important;
  border-color: var(--btn-primary-hover-bg) !important;
}
html body .btn-primary.focus,
html body .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.5) !important;
}

/* ---- 按钮 - Success ---- */
html body .btn-success {
  color: var(--btn-success-text) !important;
  background-color: var(--btn-success-bg) !important;
  border-color: var(--btn-success-bg) !important;
}
html body .btn-success:hover {
  background-color: var(--btn-success-hover-bg) !important;
  border-color: var(--btn-success-hover-bg) !important;
}

/* ---- 按钮 - Info ---- */
html body .btn-info {
  color: var(--btn-info-text) !important;
  background-color: var(--btn-info-bg) !important;
  border-color: var(--btn-info-bg) !important;
}
html body .btn-info:hover {
  background-color: var(--btn-info-hover-bg) !important;
  border-color: var(--btn-info-hover-bg) !important;
}

/* ---- 按钮 - Warning ---- */
html body .btn-warning {
  color: var(--btn-warning-text) !important;
  background-color: var(--btn-warning-bg) !important;
  border-color: var(--btn-warning-bg) !important;
}
html body .btn-warning:hover {
  background-color: var(--btn-warning-hover-bg) !important;
  border-color: var(--btn-warning-hover-bg) !important;
}

/* ---- 按钮 - Danger ---- */
html body .btn-danger {
  color: var(--btn-danger-text) !important;
  background-color: var(--btn-danger-bg) !important;
  border-color: var(--btn-danger-bg) !important;
}
html body .btn-danger:hover {
  background-color: var(--btn-danger-hover-bg) !important;
  border-color: var(--btn-danger-hover-bg) !important;
}

/* ---- 按钮 - Light ---- */
html body .btn-light {
  color: var(--btn-light-text) !important;
  background-color: var(--btn-light-bg) !important;
  border-color: var(--btn-light-bg) !important;
}
html body .btn-light:hover {
  background-color: var(--btn-light-hover-bg) !important;
  border-color: var(--btn-light-hover-bg) !important;
}

/* ---- 按钮 - 通用 ---- */
html body .btn {
  border-radius: var(--btn-radius) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  padding: var(--btn-padding-y) var(--btn-padding-x) !important;
}

/* ---- 按钮 - Outline ---- */
html body .btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
html body .btn-outline-primary:hover {
  color: #ffffff !important;
  background-color: var(--primary-color) !important;
}

/* ---- 卡片 ---- */
html body .card {
  background-color: var(--card-bg) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}
html body .card-header {
  background-color: var(--card-header-bg) !important;
  color: var(--card-header-color) !important;
}
html body .card-body {
  padding: var(--card-body-padding) !important;
}

/* ---- 全局圆角 ---- */
html body .rounded-sm {
  border-radius: var(--radius-sm) !important;
}
html body .rounded,
html body .rounded-md {
  border-radius: var(--radius-md) !important;
}
html body .rounded-lg {
  border-radius: var(--radius-lg) !important;
}

/* ---- 全局阴影 ---- */
html body .shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}
html body .shadow,
html body .shadow-md {
  box-shadow: var(--shadow-md) !important;
}
html body .shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

/* ---- 图标 ---- */
html body .main-icon,
html body .main-icon-color,
html body .fa-main {
  color: var(--main-icon-color) !important;
}
html body .header-icon,
html body .header-icon-color {
  color: var(--header-icon-color) !important;
}
html body .action-icon {
  color: var(--action-icon-color) !important;
}

/* ---- 头部导航 ---- */
html body .page-header,
html body .navbar,
html body header.navbar {
  background-color: var(--header-bg-color) !important;
  box-shadow: var(--header-shadow) !important;
  min-height: var(--header-height) !important;
  height: var(--header-height) !important;
  color: var(--header-text-color) !important;
}
/* 头部导航链接 */
html body .page-header a,
html body header.navbar a,
html body .navbar .nav-link {
  color: var(--header-nav-link-color) !important;
}
html body .page-header a:hover,
html body header.navbar a:hover,
html body .navbar .nav-link:hover {
  color: var(--header-nav-link-hover-color) !important;
}
html body .navbar .nav-link.active {
  color: var(--header-nav-link-active-color) !important;
}
/* 头部搜索 */
html body .page-header .form-control,
html body header.navbar .form-control,
html body .navbar .search-input {
  background-color: var(--header-search-bg) !important;
  border-radius: var(--header-search-radius) !important;
}
/* Logo */
html body .navbar-brand img,
html body .page-header .logo img {
  max-height: var(--header-logo-height) !important;
  height: var(--header-logo-height) !important;
}

/* ---- 导航 pills ---- */
html body .nav-pills .nav-link.active,
html body .nav-pills .show > .nav-link {
  background-color: var(--nav-pills-active-bg) !important;
  color: var(--nav-pills-active-color) !important;
}
html body .nav-pills {
  background-color: var(--nav-pills-bg) !important;
}

/* ---- 输入框 ---- */
html body .form-control,
html body .form-select,
html body textarea.form-control {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
}
html body .form-control:focus,
html body .form-select:focus {
  box-shadow: var(--input-focus-shadow) !important;
  border-color: var(--primary-color) !important;
}

/* ---- 内容最大宽度 ---- */
html body .container {
  max-width: var(--content-max-width) !important;
}

/* ============================================
   侧边栏 [data-sidebar] 由 JS 动态设置
   ============================================ */

/* 桌面端侧边栏宽度 */
html body .sg-offcanvas .sg-offcanvas-sidebar {
  flex: 0 0 var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  background-color: var(--sidebar-bg) !important;
  color: var(--sidebar-text-color) !important;
}
/* 侧边栏链接 */
html body .sg-offcanvas .sg-offcanvas-sidebar a,
html body .sg-offcanvas .sg-offcanvas-sidebar .nav-link {
  color: var(--sidebar-text-color) !important;
  border-radius: var(--sidebar-item-radius) !important;
  padding: var(--sidebar-item-padding) !important;
}
html body .sg-offcanvas .sg-offcanvas-sidebar a:hover,
html body .sg-offcanvas .sg-offcanvas-sidebar .nav-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
}
html body .sg-offcanvas .sg-offcanvas-sidebar .nav-link.active,
html body .sg-offcanvas .sg-offcanvas-sidebar a.active {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-color) !important;
}

/* ---- 侧边栏：左侧（默认） ---- */
html body:not([data-sidebar]) .sg-offcanvas .sg-offcanvas-sidebar,
html body[data-sidebar="left"] .sg-offcanvas .sg-offcanvas-sidebar {
  order: 1 !important;
}
html body:not([data-sidebar]) .sg-offcanvas .sg-offcanvas-mainbar,
html body[data-sidebar="left"] .sg-offcanvas .sg-offcanvas-mainbar {
  order: 2 !important;
  flex: 1 !important;
  max-width: none !important;
}

/* ---- 侧边栏：右侧 ---- */
html body[data-sidebar="right"] .sg-offcanvas .sg-offcanvas-sidebar {
  order: 2 !important;
}
html body[data-sidebar="right"] .sg-offcanvas .sg-offcanvas-mainbar {
  order: 1 !important;
  flex: 1 !important;
  max-width: none !important;
}

/* ---- 侧边栏：顶部 ---- */
html body[data-sidebar="top"] .sg-offcanvas > .row {
  flex-direction: column !important;
}
html body[data-sidebar="top"] .sg-offcanvas .sg-offcanvas-sidebar {
  order: 1 !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
}
html body[data-sidebar="top"] .sg-offcanvas .sg-offcanvas-mainbar {
  order: 2 !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ---- 侧边栏：底部 ---- */
html body[data-sidebar="bottom"] .sg-offcanvas > .row {
  flex-direction: column !important;
}
html body[data-sidebar="bottom"] .sg-offcanvas .sg-offcanvas-sidebar {
  order: 2 !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
}
html body[data-sidebar="bottom"] .sg-offcanvas .sg-offcanvas-mainbar {
  order: 1 !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ============================================
   帖子与评论
   ============================================ */

/* 帖子卡片 */
html body .post,
html body .post-body,
html body .post-article {
  background-color: var(--post-bg) !important;
  color: var(--post-text-color) !important;
}
html body .post-title,
html body .post-header {
  color: var(--post-header-color) !important;
}
html body .post-actions,
html body .post-action {
  color: var(--post-action-color) !important;
}

/* 评论 */
html body .comment,
html body .comment-body,
html body .comment-item {
  background-color: var(--comment-bg) !important;
  color: var(--comment-text-color) !important;
  border-color: var(--comment-border-color) !important;
}

/* ============================================
   首页背景
   使用 page-index 类（由 _header.tpl 动态添加）
   ============================================ */

/* 首页背景色 + 图片 */
html body.page-index {
  background-color: var(--index-bg-color) !important;
  background-image: var(--index-bg-image) !important;
  background-size: var(--index-bg-size) !important;
  background-repeat: var(--index-bg-repeat) !important;
  background-position: var(--index-bg-position) !important;
  background-attachment: fixed !important;
  position: relative !important;
}

/* 首页覆盖层 */
html body.page-index::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, var(--index-overlay-opacity)) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* 首页视频背景 */
#sg-customizer-bg-video {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

/* ============================================
   夜间模式
   ============================================ */

html body.night-mode {
  background-color: var(--body-bg-color-dark) !important;
  color: var(--body-color-dark) !important;
}
html body.night-mode .page-header,
html body.night-mode .navbar,
html body.night-mode header.navbar {
  background-color: var(--header-bg-color-dark) !important;
}
html body.night-mode .card {
  background-color: var(--card-dark-bg) !important;
  border-color: var(--card-dark-divider) !important;
}
html body.night-mode .card:hover {
  background-color: var(--card-dark-hover) !important;
}
html body.night-mode .form-control,
html body.night-mode .form-select,
html body.night-mode textarea.form-control {
  background-color: var(--card-dark-input) !important;
  color: var(--card-dark-input-color) !important;
  border-color: var(--card-dark-divider) !important;
}
html body.night-mode a {
  color: var(--primary-color) !important;
}
html body.night-mode .text-dark {
  color: var(--body-color-dark) !important;
}

/* ============================================
   过渡动画
   ============================================ */

html body .btn,
html body .card,
html body .form-control,
html body .form-select,
html body .nav-link,
html body a,
html body .page-header,
html body .navbar {
  transition: all var(--transition-speed) ease !important;
}