/*
 * TheKoreanTalk - Q&A Forum Theme
 * Compiled from Q&A template SCSS source
 * Based on Bootstrap 5.3 + custom components
 */

/* =========================================================
   CSS VARIABLES (theme colors matching _variables.scss)
   Primary: #863efa (purple)
   ========================================================= */
:root {
  --bs-primary: #863efa;
  --bs-primary-rgb: 134, 62, 250;
  --bs-success: #0cbc87;
  --bs-success-rgb: 12, 188, 135;
  --bs-danger: #d6293e;
  --bs-warning: #f7c32e;
  --bs-info: #17a2b8;
  --bs-dark: #09080c;
  --bs-light: #eff1f3;
  --bs-orange: #fd7e14;
  --bs-mode: #fff;
  --bs-heading-color: #09080c;
  --bs-font-base: 'Inter', sans-serif;
  --bs-font-heading: 'Geist', sans-serif;
  --bs-border-color: #dee2e6;

  /* Avatar sizes */
  --avatar-base: 3rem;
  --avatar-xxs: 1.8rem;
  --avatar-xs: 2rem;
  --avatar-sm: 2.3rem;
  --avatar-lg: 4rem;
  --avatar-xl: 5.125rem;
  --avatar-xxl: 8rem;
}

/* Dark mode variables */
[data-bs-theme="dark"] {
  --bs-light: #292a2d;
  --bs-body-bg: #1b1b1c;
  --bs-body-color: #c4c5c7;
  --bs-heading-color: #fff;
  --bs-mode: #111013;
  --bs-border-color: rgba(255,255,255,0.07);
  --bs-card-bg: #111013;
  --bs-card-cap-bg: #111013;
  color-scheme: dark;
}

/* =========================================================
   FONTS
   ========================================================= */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Geist', sans-serif;
  color: var(--bs-heading-color);
}
.heading-color { color: var(--bs-heading-color) !important; }

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
header {
  z-index: 1040;
  position: relative;
}
.header-sticky {
  position: sticky;
  top: 0;
  z-index: 1040;
}
.header-absolute {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: transparent;
}
header.header-sticky-on {
  position: fixed;
  z-index: 1040;
  top: 0; left: 0; right: 0;
  background-color: var(--bs-mode);
  animation: fadeInDown .5s;
  width: 100%;
  border-bottom: 1px solid var(--bs-border-color);
}

/* Navbar brand */
.navbar-brand-item {
  height: 30px;
  display: block;
  width: auto;
}
.navbar-brand {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Dropdown hover */
@media (min-width: 1200px) {
  .dropdown-hover .dropdown:hover > .dropdown-menu {
    display: block;
    animation: slideInUp .3s;
  }
}
@keyframes slideInUp {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0,-100%,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

/* Dropdown toggle icon override */
.navbar .dropdown-toggle::after {
  content: "\f107";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: 0.35rem;
  font-size: 0.8rem;
  vertical-align: middle;
  border: none;
}

/* Navbar collapse on mobile */
@media (max-width: 1199px) {
  .navbar-collapse {
    box-shadow: 0 10px 30px rgba(83,88,93,.4);
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--bs-mode);
    border-top: 1px solid rgba(0,0,0,.1);
    z-index: 1030;
  }
  .navbar-collapse .navbar-nav .nav-item {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 8px 20px;
  }
  .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding: .25rem 0;
  }
  .navbar-collapse .navbar-nav .dropdown-toggle::after {
    position: absolute;
    right: 15px;
  }
}

/* Navbar toggler animation (X) */
.navbar-toggler { padding: 10px; }
.navbar-toggler-animation {
  position: relative;
  height: 22px; width: 22px;
  display: inline-block;
  vertical-align: middle;
}
.navbar-toggler-animation span {
  transition: all .3s ease-in-out;
  height: 2px;
  background: var(--bs-navbar-color, #09080c);
  display: block;
  position: absolute;
  width: 100%;
  border-radius: 30px;
}
.navbar-toggler-animation span:nth-child(1) { top: 10%; }
.navbar-toggler-animation span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.navbar-toggler-animation span:nth-child(3) { bottom: 10%; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-animation span:nth-child(1) {
  transform: rotateZ(45deg) translateY(-50%);
  top: 49%; transform-origin: 50% 0; width: 100%;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-animation span:nth-child(2) { visibility: hidden; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-animation span:nth-child(3) {
  transform: rotateZ(-45deg) translateY(-50%);
  bottom: 42%; transform-origin: 50% 0; width: 100%;
}

/* Input bg light variant in nav */
.input-bg-light .form-control {
  background: var(--bs-light);
  border-color: transparent;
}

/* =========================================================
   BG MODE
   ========================================================= */
.bg-mode { background: var(--bs-mode) !important; }
[data-bs-theme="dark"] .bg-mode { background: var(--bs-mode) !important; }

/* =========================================================
   CARDS
   ========================================================= */
.card {
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card {
  background-color: var(--bs-mode);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card-header {
  background-color: var(--bs-mode);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card-footer {
  background-color: var(--bs-mode);
  border-color: var(--bs-border-color);
}

/* =========================================================
   AVATAR
   ========================================================= */
.avatar {
  height: var(--avatar-base);
  width:  var(--avatar-base);
  position: relative;
  display: inline-block !important;
  flex-shrink: 0;
}
.avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-xxs { height: var(--avatar-xxs); width: var(--avatar-xxs); }
.avatar-xs  { height: var(--avatar-xs);  width: var(--avatar-xs); }
.avatar-sm  { height: var(--avatar-sm);  width: var(--avatar-sm); }
.avatar-lg  { height: var(--avatar-lg);  width: var(--avatar-lg); }
.avatar-xl  { height: var(--avatar-xl);  width: var(--avatar-xl); }
.avatar-xxl { height: var(--avatar-xxl); width: var(--avatar-xxl); }

@media (max-width: 767px) {
  .avatar-xxl { height: var(--avatar-xl); width: var(--avatar-xl); }
}

.avatar-group {
  padding: 0;
  display: flex;
  list-style: none;
  margin: 0;
}
.avatar-group > li { position: relative; }
.avatar-group > li:not(:last-child) { margin-right: -0.8rem; }

/* Status dot */
[class*="status-"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 100%;
  border: 2px solid #fff;
  height: 12px; width: 12px;
  right: -2px; top: -2px;
}
.status-online::before  { background-color: #0cbc87; }
.status-offline::before { background-color: #d6293e; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  outline: 0;
  margin-bottom: 6px;
}
.input-group .btn { margin-bottom: 0; }

.btn-xs {
  padding: .4rem .6rem;
  font-size: .7rem;
  line-height: 1.2;
  border-radius: .25rem;
}

/* Primary soft */
.btn-primary-soft {
  color: var(--bs-primary);
  background-color: rgba(134,62,250,.1);
  border-color: transparent;
}
.btn-primary-soft:hover, .btn-primary-soft:focus {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
/* Success soft */
.btn-success-soft {
  color: #0cbc87;
  background-color: rgba(12,188,135,.1);
  border-color: transparent;
}
/* Danger soft */
.btn-danger-soft {
  color: #d6293e;
  background-color: rgba(214,41,62,.1);
  border-color: transparent;
}

/* Vote button */
.btn-vote {
  background: none;
  border: none;
  color: var(--bs-secondary-color, #6c757d);
  cursor: pointer;
  padding: .25rem .5rem;
}
.btn-vote:hover, .btn-vote:focus { color: var(--bs-primary); }

/* Round button */
.btn-round {
  border-radius: 50% !important;
  width: 2.2rem; height: 2.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Icon button */
.btn-icon {
  width: 2rem; height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .375rem;
}

/* Danger soft hover */
.bg-danger-soft-hover:hover {
  background-color: rgba(214,41,62,.1) !important;
  color: #d6293e !important;
}

/* btn-outline-light in dark */
[data-bs-theme="dark"] .btn-outline-light {
  border-color: var(--bs-gray-400, #aaa);
  color: var(--bs-body-color);
}

/* Social bg colors */
.bg-facebook  { background-color: #3b5998; color: #fff; }
.bg-twitter   { background-color: #1da1f2; color: #fff; }
.bg-whatsapp  { background-color: #25d366; color: #fff; }
.bg-linkedin  { background-color: #0a66c2; color: #fff; }
.bg-instagram { background-color: #e1306c; color: #fff; }
.text-facebook  { color: #3b5998 !important; }
.text-google-icon { color: #db4437 !important; }

/* =========================================================
   NAV / PILLS
   ========================================================= */
/* Active nav link */
.nav .nav-item .nav-link.active { color: var(--bs-primary); }

/* nav-divider */
.nav.nav-divider a:not(.dropdown-item) { color: inherit; }
.nav.nav-divider .nav-item + .nav-item::before {
  content: "•";
  color: inherit;
  padding-left: .5rem;
  padding-right: .5rem;
  opacity: .8;
}
.nav.nav-divider .nav-item { display: inline-block; vertical-align: middle; }
.nav.nav-divider .nav-link { padding: 0; color: inherit; }

/* nav-pills-primary-soft */
.nav-pills-primary-soft .nav-link { font-weight: 500; border: none; }
.nav-pills-primary-soft .nav-link.active,
.nav-pills-primary-soft .show > .nav-link {
  color: var(--bs-primary) !important;
  background-color: rgba(134,62,250,.1);
}

/* Footer nav padding */
footer .nav.flex-column:not(.nav-pills) .nav-link {
  padding-left: 0;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

/* text-primary-hover */
.text-primary-hover { transition: color .2s; }
.text-primary-hover:hover, .text-primary-hover a:hover { color: var(--bs-primary) !important; }
a.text-primary-hover:hover { color: var(--bs-primary) !important; }

/* =========================================================
   TABLES (forum thread table)
   ========================================================= */
.table-shrink {
  white-space: nowrap;
}
.table-shrink td:first-child,
.table-shrink th:first-child {
  white-space: normal;
  width: 99%;
}
.table-title { font-size: 0.9rem; }

/* Dark table */
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,.03);
}

/* =========================================================
   BADGES
   ========================================================= */
/* Soft badge variants */
.badge.bg-primary-soft   { background-color: rgba(134,62,250,.15) !important; color: #863efa !important; }
.badge.bg-success-soft   { background-color: rgba(12,188,135,.15)  !important; color: #0cbc87 !important; }
.badge.bg-danger-soft    { background-color: rgba(214,41,62,.15)   !important; color: #d6293e !important; }
.badge.bg-warning-soft   { background-color: rgba(247,195,46,.15)  !important; color: #d4a00a !important; }
.badge.bg-info-soft      { background-color: rgba(23,162,184,.15)  !important; color: #17a2b8 !important; }
.badge.bg-secondary-soft { background-color: rgba(169,168,171,.15) !important; color: #6c757d !important; }
.badge.bg-dark-soft      { background-color: rgba(9,8,12,.1)       !important; color: #09080c !important; }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb-dark .breadcrumb-item { color: rgba(255,255,255,.7); }
.breadcrumb-dark .breadcrumb-item a { color: rgba(255,255,255,.7); }
.breadcrumb-dark .breadcrumb-item a:hover { color: #fff; }
.breadcrumb-dark .breadcrumb-item.active { color: rgba(255,255,255,.9); }
.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* =========================================================
   FORUM COMPONENTS
   ========================================================= */
/* Comment thread line */
.comment-wrap { position: relative; }
.comment-line-inner {
  position: absolute;
  left: 20px; top: 0;
  width: 2px;
  background-color: var(--bs-border-color);
  height: 100%;
}

/* Forum content area */
.forum-content { line-height: 1.8; }
.forum-content p { margin-bottom: .75rem; }
.forum-content pre {
  background: var(--bs-light);
  padding: 1rem;
  border-radius: .5rem;
  overflow-x: auto;
}
[data-bs-theme="dark"] .forum-content pre { background: #21262d; }
.forum-content code {
  background: rgba(134,62,250,.1);
  color: var(--bs-primary);
  padding: .15rem .35rem;
  border-radius: .25rem;
  font-size: .875em;
}
.forum-content blockquote {
  border-left: 3px solid var(--bs-primary);
  padding-left: 1rem;
  color: var(--bs-secondary-color, #6c757d);
  margin: 1rem 0;
}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-top {
  cursor: pointer;
  position: fixed !important;
  bottom: 40px; right: 40px;
  display: block;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transform: translateY(50%);
  transition: all .3s;
  background: var(--bs-primary);
  color: #fff;
  border-radius: 100%;
  width: 52px; height: 52px;
  line-height: 52px;
  text-align: center;
}
.back-top::before {
  content: "\f176";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.back-top:hover { background: #6d2fd6; }
.back-top.back-top-show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 575px) { .back-top { display: none; } }

/* =========================================================
   FORM CONTROLS
   ========================================================= */
.form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(134,62,250,.2); }

/* fake password toggle */
.fakepasswordicon {
  height: 100%; display: flex;
  justify-content: center; align-items: center;
  cursor: pointer;
}
.fakepasswordicon.fa-eye::before { content: "\f06e" !important; }

/* =========================================================
   QUILL EDITOR THEME
   ========================================================= */
.ql-toolbar.ql-snow { border-color: var(--bs-border-color); }
.ql-container.ql-snow { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .ql-toolbar.ql-snow {
  background: #21262d;
  border-color: rgba(255,255,255,.15);
}
[data-bs-theme="dark"] .ql-container.ql-snow {
  background: #111013;
  border-color: rgba(255,255,255,.15);
  color: #e6edf3;
}
[data-bs-theme="dark"] .ql-editor.ql-blank::before { color: rgba(255,255,255,.4); }
[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: #e6edf3; }
[data-bs-theme="dark"] .ql-snow .ql-fill  { fill: #e6edf3; }
[data-bs-theme="dark"] .ql-snow .ql-picker { color: #e6edf3; }

/* =========================================================
   PAGINATION - primary soft variant
   ========================================================= */
.pagination-primary-soft .page-link {
  color: var(--bs-primary);
  background-color: rgba(134,62,250,.1);
  border-color: transparent;
}
.pagination-primary-soft .page-item.active .page-link {
  color: #fff;
  background-color: var(--bs-primary);
}

/* =========================================================
   DARK MODE CARD / DROPDOWNS
   ========================================================= */
[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: #111013;
  --bs-dropdown-border-color: rgba(255,255,255,.07);
}
[data-bs-theme="dark"] .btn-light {
  background-color: #292a2d;
  border-color: #292a2d;
  color: rgba(255,255,255,.85);
}
[data-bs-theme="dark"] .btn-light:hover {
  background-color: #3c3e41;
  border-color: #3c3e41;
}
[data-bs-theme="dark"] .bg-light { background-color: #292a2d !important; }
[data-bs-theme="dark"] .border    { border-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] .border-bottom { border-bottom-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] .border-top    { border-top-color:    rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] hr { border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #111013;
  border-color: rgba(255,255,255,.15);
  color: #e6edf3;
}
[data-bs-theme="dark"] .form-control::placeholder { color: rgba(255,255,255,.4); }
[data-bs-theme="dark"] .input-group-text {
  background-color: #21262d;
  border-color: rgba(255,255,255,.15);
  color: #e6edf3;
}
[data-bs-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .table-dark {
  --bs-table-bg: #161b22;
  --bs-table-striped-bg: #1f2428;
  --bs-table-border-color: #30363d;
}
[data-bs-theme="dark"] .progress { background-color: #21262d; }
[data-bs-theme="dark"] .modal-content {
  background-color: #111013;
  border-color: rgba(255,255,255,.07);
}
[data-bs-theme="dark"] .alert {
  background-color: #21262d;
  border-color: rgba(255,255,255,.1);
}
[data-bs-theme="dark"] .pagination .page-link {
  background-color: #21262d;
  border-color: rgba(255,255,255,.1);
  color: #e6edf3;
}
[data-bs-theme="dark"] .pagination .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
[data-bs-theme="dark"] .offcanvas {
  background-color: #111013;
}
/* Nav pills in dark */
[data-bs-theme="dark"] .nav-pills .nav-link {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
}
[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--bs-body-color); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background-color: #111013;
  border-color: rgba(255,255,255,.1) rgba(255,255,255,.1) #111013;
  color: var(--bs-primary);
}
[data-bs-theme="dark"] .nav-tabs { border-color: rgba(255,255,255,.07); }

/* =========================================================
   UTILITIES (from _utilities.scss)
   ========================================================= */
/* Height utilities */
.h-20px  { height: 20px  !important; }
.h-30px  { height: 30px  !important; }
.h-40px  { height: 40px  !important; }
.h-50px  { height: 50px  !important; }
.h-80px  { height: 80px  !important; }
.h-100px { height: 100px !important; }
.h-150px { height: 150px !important; }
.h-200px { height: 200px !important; }
.h-500px { height: 500px !important; }

/* Width utilities */
.w-40px  { width: 40px  !important; }
.w-50px  { width: 50px  !important; }
.w-60px  { width: 60px  !important; }
.w-80px  { width: 80px  !important; }
.w-150px { width: 150px !important; }

/* Min width auto */
.min-w-auto { min-width: auto !important; }

/* Dropdown menu size sm */
.dropdown-menu-size-sm { min-width: 280px; }

/* Fill mode for SVG */
.fill-mode { fill: currentColor; }
[data-bs-theme="dark"] .fill-mode { fill: #e6edf3; }

/* Icon link */
.icon-link-hover .bi { transition: transform .2s; }
.icon-link-hover:hover .bi { transform: translateX(3px); }

/* pt-8 (padding top 8rem) */
.pt-8  { padding-top: 5rem !important; }
.pb-5  { padding-bottom: 3rem !important; }

/* Responsive vh */
.vh-100 { height: 100vh !important; }

/* =========================================================
   SMALLER TEXT
   ========================================================= */
.smaller { font-size: .75rem; }

/* =========================================================
   BLOG CONTENT
   ========================================================= */
.blog-content { line-height: 1.85; font-size: 1.05rem; }
.blog-content h2, .blog-content h3, .blog-content h4 { margin-top: 2rem; margin-bottom: 1rem; }
.blog-content img { max-width: 100%; border-radius: .5rem; margin: 1rem 0; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.blog-content blockquote {
  border-left: 4px solid var(--bs-primary);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--bs-secondary-color, #6c757d);
  font-style: italic;
}

/* =========================================================
   ANIMATION BLINK
   ========================================================= */
.animation-blink { animation: blink 2s infinite; }
@keyframes blink {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* =========================================================
   CHOICES.JS DARK MODE
   ========================================================= */
[data-bs-theme="dark"] .choices__inner {
  background-color: #111013 !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #e6edf3 !important;
}
[data-bs-theme="dark"] .choices__list--dropdown {
  background-color: #111013 !important;
  border-color: rgba(255,255,255,.07) !important;
}
[data-bs-theme="dark"] .choices__item { color: #e6edf3 !important; }
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #21262d !important;
}
.choices__inner { border-radius: .375rem !important; padding: .35rem .75rem !important; }
.choices[data-type*="select-one"]::after {
  border-color: #6c757d transparent transparent !important;
}

/* =========================================================
   PROFILE CARD
   ========================================================= */
.profile-cover {
  height: 200px;
  object-fit: cover;
  width: 100%;
  border-radius: .5rem .5rem 0 0;
}

/* =========================================================
   FORUM VOTE SIDEBAR
   ========================================================= */
.top-sm-70px { top: 70px; }
@media (min-width: 576px) { .sticky-sm-top { position: sticky; } }

/* =========================================================
   RESPONSIVE UTILITIES
   ========================================================= */
@media (max-width: 767px) {
  .back-top { bottom: 10px; right: 10px; width: 30px; height: 30px; line-height: 30px; }
}

/* =========================================================
   NAVBAR ACTIVE LINK
   ========================================================= */
.navbar-nav .nav-link.active { color: var(--bs-primary) !important; }

/* =========================================================
   PT-8 for pages with sticky header
   ========================================================= */
main > section:first-child { padding-top: 80px; }
main > section.bg-dark:first-child,
main > section[data-bs-theme="dark"]:first-child { padding-top: 80px; }

/* =========================================================
   MISC
   ========================================================= */
*:focus-visible { outline: none; }
a { color: var(--bs-primary); }
a:hover { color: color-mix(in srgb, var(--bs-primary), black 20%); }
[data-bs-theme="dark"] a { color: var(--bs-primary); }

/* Overlayscrollbars dark fix */
[data-bs-theme="dark"] .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background: rgba(255,255,255,.2);
}

/* Table responsive in dark */
[data-bs-theme="dark"] .table-responsive { color: var(--bs-body-color); }

/* Sticky nav shrink */
header.header-sticky { animation: none; }

/* =========================================================
   ADDITIONAL STYLES - Header sticky bg fix
   ========================================================= */

/* When sticky header activates via JS */
header.header-sticky-on {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1040;
  background-color: var(--bs-mode, #fff) !important;
  border-bottom: 1px solid var(--bs-border-color);
  animation: fadeInDown .3s ease;
}

[data-bs-theme="dark"] header.header-sticky-on {
  background-color: #111013 !important;
  border-bottom-color: rgba(255,255,255,.07);
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo sizing */
.navbar-brand span {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--bs-heading-color);
}

/* Section first child padding fix for sticky header */
main > section:first-child { padding-top: 5rem; }
@media (min-width: 992px) { main > section:first-child { padding-top: 7rem; } }

/* Dark section first child */
main > .bg-dark:first-child,
main > section.bg-dark:first-child { padding-top: 5rem; }
@media (min-width: 992px) {
  main > .bg-dark:first-child,
  main > section.bg-dark:first-child { padding-top: 7rem; }
}

/* Card with border-start for forum thread content */
.card.border-start {
  border-left: 1px solid var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .card.border-start {
  border-left-color: rgba(255,255,255,.07) !important;
}

/* Rounded start fix */
.rounded-start { border-radius: .5rem 0 0 .5rem !important; }
.rounded-0 { border-radius: 0 !important; }

/* pe-6 */
.pe-6 { padding-right: 2.5rem !important; }

/* Text orange */
.text-orange { color: #fd7e14 !important; }
.bg-orange { background-color: #fd7e14 !important; }

/* Small text */
.small { font-size: .875em; }
.smaller { font-size: .75rem; }
.fs-5 { font-size: 1.1rem !important; }

/* Navbar bg fix - ensure it has bg */
.navbar.bg-mode,
header .navbar { background-color: var(--bs-mode, #fff); }
[data-bs-theme="dark"] .navbar.bg-mode,
[data-bs-theme="dark"] header .navbar { background-color: #111013; }

/* Dropdown menu z-index fix */
.navbar .dropdown-menu { z-index: 1050; }

/* Sticky space placeholder */
#sticky-space.active { display: block; }
#sticky-space { display: block; height: 0; }

/* Tables in light mode */
.table { --bs-table-color: var(--bs-body-color); }
.table th { font-weight: 600; font-size: .85rem; color: var(--bs-body-color); }

/* Forum thread vote section */
.border.d-block.rounded { border-color: var(--bs-border-color) !important; }
[data-bs-theme="dark"] .border.d-block.rounded { border-color: rgba(255,255,255,.07) !important; }

/* hstack gap */
.hstack { display: flex; align-items: center; }
.hstack.gap-4 > * + * { margin-left: 1.5rem; }

/* vstack gap */
.vstack { display: flex; flex-direction: column; }
.vstack.gap-4 > * + * { margin-top: 1.5rem; }

/* icon-link */
.icon-link { display: inline-flex; align-items: center; gap: .3rem; }
.icon-link .bi { transition: transform .2s; }
.icon-link-hover:hover .bi { transform: translateX(3px); }

/* min-w-auto */
.min-w-auto { min-width: auto !important; }

/* Choices select height fix */
.choices { margin-bottom: 0; font-size: .938rem; }
.choices__inner {
  min-height: 40px !important;
  border-radius: .5rem !important;
  padding: 6px 10px !important;
  font-size: .938rem;
}

/* Rounded start for table */
th.rounded-start { border-radius: .5rem 0 0 0; }

/* Forum table links */
.table-title a { color: var(--bs-heading-color); font-weight: 500; }
.table-title a:hover { color: var(--bs-primary); }

/* Profile page */
.avatar.avatar-xxl img { border-radius: 50%; }

/* Offcanvas width */
.offcanvas-start { width: 280px; }

/* Progress */
.progress { height: 6px; border-radius: 999px; overflow: hidden; }
.progress-bar { border-radius: 999px; }

/* Alert auto-hide (JS) */
.alert-auto-hide { transition: opacity .5s; }

/* Color.css extra utilities */
.text-success { color: #0cbc87 !important; }
.text-danger  { color: #d6293e !important; }
.text-warning { color: #f7c32e !important; }
.text-info    { color: #17a2b8 !important; }
.bg-success   { background-color: #0cbc87 !important; }
.bg-danger    { background-color: #d6293e !important; }
.bg-warning   { background-color: #f7c32e !important; }
.bg-info      { background-color: #17a2b8 !important; }

/* Scrollbar padding for hash links */
html { scroll-padding-top: 80px; }