/* ==========================================================================
   BIIRBEH.MN - Modern Responsive UI/UX Design System
   Designed for Mobile & Modern Web Standards
   ========================================================================== */

:root {
  --bb-bg: #FFFFE6;           /* Warm parchment cream color requested by user */
  --bb-surface: #ffffff;
  --bb-surface-card: #ffffff;
  --bb-text-main: #1e293b;
  --bb-text-muted: #64748b;
  --bb-text-light: #94a3b8;
  --bb-border: #e6e6cc;
  --bb-border-subtle: #f5f5dc;
  
  /* Brand colors - Forest / Pine Green (#10625C) from user's image */
  --bb-primary: #10625C;      /* Deep literary teal/pine green */
  --bb-primary-hover: #147a72;
  --bb-accent: #0c4d48;       /* Deep forest green */
  --bb-teal: #10625C;         /* Literary teal green */
  --bb-gold: #b45309;         /* Classical bronze/gold */
  
  --bb-radius: 12px;
  --bb-radius-sm: 8px;
  --bb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --bb-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  --bb-shadow-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
}

/* Reset & Base Typography */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFFFE6 !important;
  color: var(--bb-text-main);
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif !important;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-width: 0 !important;
}

body.bb-body {
  background-color: #FFFFE6 !important;
}

/* Fluid content images */
img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--bb-primary);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
a:hover {
  color: var(--bb-accent);
  text-decoration: none;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.bb-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bb-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.bb-header-top {
  background: linear-gradient(135deg, #10625C 0%, #0c4d48 100%);
  color: #f8fafc;
  font-size: 12.5px;
  padding: 4px 0;
}
.bb-header-top a,
.bb-header-top a:link,
.bb-header-top a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500;
  opacity: 0.95;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.bb-header-top a:hover,
.bb-header-top a:focus {
  color: #fde047 !important; /* Bright warm amber/yellow for clear contrast */
  opacity: 1;
  text-decoration: none !important;
}

.bb-navbar {
  padding: 4px 0;
  background: transparent;
}
.bb-navbar .container-fluid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Mobile Hamburger Toggle */
.bb-hamburger-btn {
  color: var(--bb-text-main, #1e293b) !important;
  background: transparent !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 6px !important;
  border-radius: 7px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.bb-hamburger-btn:hover {
  background: rgba(16, 98, 92, 0.08) !important;
  color: var(--bb-primary, #10625C) !important;
}
html[data-bs-theme="dark"] .bb-hamburger-btn,
html[data-theme="dark"] .bb-hamburger-btn {
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .bb-hamburger-btn:hover,
html[data-theme="dark"] .bb-hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #34d399 !important;
}

.bb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.bb-brand-emblem {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #10625C 0%, #147a72 100%);
  color: #ffffff;
  border-radius: 9px;
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 7px rgba(16, 98, 92, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
}
.bb-brand:hover .bb-brand-emblem {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 98, 92, 0.35);
  border-color: #f59e0b;
}
.bb-brand-logo {
  height: 34px;
  width: auto;
  border-radius: 6px;
}
.bb-brand-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #10625C; /* Brand deep emerald green */
  line-height: 1.1;
  font-family: 'Outfit', 'Roboto', sans-serif;
  transition: color 0.2s ease;
}
.bb-brand-title span {
  color: #d97706; /* Golden yellow / amber brand color from header */
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(217, 119, 6, 0.15);
}
.bb-brand:hover .bb-brand-title {
  color: #0b4944;
}
.bb-brand:hover .bb-brand-title span {
  color: #b45309;
}
.bb-brand-subtitle {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: #147a72; /* Brand green text */
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

/* Nav Links - Sleek, Compact & Prominent */
.bb-nav-item,
.navbar-nav .nav-link.bb-nav-item,
#mainDesktopNavbar .bb-nav-item {
  color: #334155;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
}
.bb-nav-item i,
.navbar-nav .nav-link.bb-nav-item i {
  font-size: 14px !important;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.bb-nav-item:hover,
.navbar-nav .nav-link.bb-nav-item:hover {
  color: var(--bb-primary) !important;
  background-color: rgba(16, 98, 92, 0.08) !important;
  transform: translateY(-1px);
}
.bb-nav-item:hover i,
.navbar-nav .nav-link.bb-nav-item:hover i {
  opacity: 1;
  transform: scale(1.15);
}
.bb-nav-item.active,
.navbar-nav .nav-link.bb-nav-item.active {
  color: var(--bb-primary) !important;
  font-weight: 700 !important;
  background-color: rgba(16, 98, 92, 0.1) !important;
  box-shadow: inset 0 -2.5px 0 var(--bb-primary) !important;
}

/* Header Write Button - Compact and balanced */
.btn-bb-write {
  padding: 4px 11px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 7px rgba(16, 98, 92, 0.25) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.btn-bb-write i {
  font-size: 14px !important;
}
.btn-bb-write:hover {
  transform: translateY(-1px) !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 12px rgba(16, 98, 92, 0.35) !important;
}

/* Notebook & Laptop responsive adjustments (14 inch screens ~ 992px - 1280px) */
@media (min-width: 992px) and (max-width: 1280px) {
  .bb-navbar {
    padding: 3px 0;
  }
  .bb-brand-emblem {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 7px;
  }
  .bb-brand-title {
    font-size: 16.5px !important;
  }
  .bb-brand-subtitle {
    display: none !important;
  }
  .bb-nav-item,
  .navbar-nav .nav-link.bb-nav-item,
  #mainDesktopNavbar .bb-nav-item {
    font-size: 12.5px !important;
    padding: 4px 5px !important;
    gap: 3px !important;
  }
  .bb-nav-item i,
  .navbar-nav .nav-link.bb-nav-item i {
    font-size: 13px !important;
  }
  .btn-bb-write {
    padding: 3px 8px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 992px) and (max-width: 1120px) {
  .bb-theme-toggle-btn .theme-text {
    display: none !important;
  }
  .bb-theme-toggle-btn {
    padding: 3px 6px !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    justify-content: center !important;
  }
}

/* Header Banner Graphic */
.bb-banner-box {
  background: #10625C url('images/header_bg2008.jpg') left center/cover no-repeat;
  height: 120px;
  border-radius: var(--bb-radius);
  margin-bottom: 20px;
  box-shadow: var(--bb-shadow-sm);
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) {
  .bb-banner-box {
    height: 75px;
    margin-bottom: 14px;
    border-radius: var(--bb-radius-sm);
  }
}

/* Action button in header */
.btn-bb-primary,
a.btn-bb-primary,
a.btn-bb-primary:link,
a.btn-bb-primary:visited {
  background: linear-gradient(135deg, #10625C 0%, #147a72 100%) !important;
  background-color: #10625C !important;
  color: #ffffff !important;
  border: 1px solid #10625C !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 7px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(16, 98, 92, 0.25);
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.btn-bb-primary:hover,
a.btn-bb-primary:hover,
.btn-bb-primary:focus,
a.btn-bb-primary:focus {
  background: linear-gradient(135deg, #147a72 0%, #178a81 100%) !important;
  background-color: #147a72 !important;
  color: #ffffff !important;
  border-color: #147a72 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 98, 92, 0.35);
  text-decoration: none !important;
}

/* Bootstrap btn-primary override to match Biirbeh Brand Green */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background: linear-gradient(135deg, rgb(16, 98, 92) 0%, rgb(20, 122, 114) 100%) rgb(16, 98, 92) !important;
  background-color: rgb(16, 98, 92) !important;
  border: 1px solid rgb(16, 98, 92) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 98, 92, 0.25);
  transition: all 0.2s ease;
}
.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover,
.btn-primary:focus,
button.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background: linear-gradient(135deg, rgb(20, 122, 114) 0%, rgb(23, 138, 129) 100%) rgb(20, 122, 114) !important;
  background-color: rgb(20, 122, 114) !important;
  border-color: rgb(20, 122, 114) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 98, 92, 0.35);
}

/* ==========================================================================
   Modern Sidebar Widgets / Cards
   ========================================================================== */
.bb-widget {
  background: var(--bb-surface);
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-border);
  box-shadow: var(--bb-shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.bb-widget:hover {
  box-shadow: var(--bb-shadow);
}

.bb-widget-header {
  padding: 11px 15px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bb-border);
}
.bb-widget-header.header-red {
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  color: #ffffff;
}
.bb-widget-header.header-teal,
.bb-widget-header.header-blue {
  background: linear-gradient(135deg, #10625C 0%, #0c4d48 100%);
  color: #ffffff;
}

.bb-widget-body {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--bb-text-main);
  background: #ffffff;
}

/* Fix old inner tables within widgets */
.bb-widget table,
.bb-widget td,
.bb-widget tr {
  border: none !important;
  background: transparent !important;
}
.bb-widget table {
  width: 100% !important;
  max-width: 100% !important;
}

/* Widget Lists (Authors, Categories) — Full Height, No Scrollbar */
.bb-widget-list,
.bb-authors-list,
.bb-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

@media (min-width: 1400px) {
  .bb-widget-list,
  .bb-authors-list,
  .bb-categories-list {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

@media (max-width: 991px) {
  .bb-widget-list,
  .bb-authors-list,
  .bb-categories-list {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

.bb-widget-list::-webkit-scrollbar {
  width: 6px;
}
.bb-widget-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.bb-widget-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.bb-widget-list li {
  padding: 8px 6px;
  border-bottom: 1px dashed var(--bb-border-subtle);
  font-size: 15px !important;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bb-widget-list li:last-child {
  border-bottom: none;
}
.bb-widget-list li i {
  font-size: 13.5px !important;
  opacity: 0.8;
  flex-shrink: 0;
}
.bb-widget-list li a {
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease;
}
.bb-widget-list li a:hover {
  color: var(--bb-primary) !important;
  font-weight: 600;
  transform: translateX(3px);
}

.bb-authors-list li a,
.bb-categories-list li a {
  font-size: 15px !important;
  line-height: 1.45;
}

/* ==========================================================================
   Prominent Submit Content Widget (Мэдээлэл оруулах блок)
   ========================================================================== */
.bb-widget-submit-cta {
  border: 2px solid #0d9488 !important;
  box-shadow: 0 4px 18px rgba(13, 148, 136, 0.16) !important;
  border-radius: var(--bb-radius, 12px) !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bb-widget-submit-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(13, 148, 136, 0.22) !important;
}
.bb-widget-header.header-submit-cta {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #2563eb 100%) !important;
  color: #ffffff !important;
  padding: 12px 15px;
  border-bottom: none;
}
.bb-widget-submit-cta .bb-widget-body {
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 45%);
  padding: 14px 14px 12px !important;
}
.bb-submit-cta-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(13, 148, 136, 0.22);
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.08);
}
.bb-btn-submit-action {
  background: linear-gradient(135deg, #0d9488 0%, #0284c7 100%) !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
  color: #ffffff !important;
}
.bb-btn-submit-action:hover {
  background: linear-gradient(135deg, #0f766e 0%, #0369a1 100%) !important;
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.45);
  color: #ffffff !important;
}

/* Dark mode overrides for Submit CTA Widget */
html[data-bs-theme="dark"] .bb-widget-submit-cta,
html[data-theme="dark"] .bb-widget-submit-cta,
body.dark-mode .bb-widget-submit-cta {
  border-color: #14b8a6 !important;
  box-shadow: 0 4px 20px rgba(20, 184, 166, 0.25) !important;
  background: #1e293b !important;
}
html[data-bs-theme="dark"] .bb-widget-submit-cta .bb-widget-body,
html[data-theme="dark"] .bb-widget-submit-cta .bb-widget-body,
body.dark-mode .bb-widget-submit-cta .bb-widget-body {
  background: linear-gradient(180deg, #132e2b 0%, #0f172a 50%) !important;
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .bb-submit-cta-card,
html[data-theme="dark"] .bb-submit-cta-card,
body.dark-mode .bb-submit-cta-card {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .bb-submit-cta-card h6,
html[data-theme="dark"] .bb-submit-cta-card h6,
body.dark-mode .bb-submit-cta-card h6 {
  color: #ffffff !important;
}
html[data-bs-theme="dark"] .bb-widget-submit-cta .text-dark,
html[data-theme="dark"] .bb-widget-submit-cta .text-dark,
body.dark-mode .bb-widget-submit-cta .text-dark {
  color: #f8fafc !important;
}
html[data-bs-theme="dark"] .bb-widget-submit-cta .text-secondary,
html[data-theme="dark"] .bb-widget-submit-cta .text-secondary,
body.dark-mode .bb-widget-submit-cta .text-secondary {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   Old Articles Widget (block-Old_Articles.php)
   ========================================================================== */
.bb-old-articles-widget .bb-old-date-row td {
  padding-top: 14px !important;
  padding-bottom: 6px !important;
}
.bb-old-articles-widget tr:first-child.bb-old-date-row td {
  padding-top: 4px !important;
}
.bb-old-date-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bb-primary, #10625C);
  background: rgba(16, 98, 92, 0.08);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.2px;
}
html[data-bs-theme="dark"] .bb-old-date-badge,
html[data-theme="dark"] .bb-old-date-badge {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}

.bb-old-item-row td {
  padding: 6px 2px !important;
  border-bottom: 1px dashed var(--bb-border-subtle, rgba(226, 232, 240, 0.6)) !important;
}
.bb-old-item-row:last-child td {
  border-bottom: none !important;
}

.bb-old-icon-col {
  width: 18px;
  padding-top: 8px !important;
  vertical-align: top;
}
.bb-old-bullet {
  font-size: 11px;
  color: var(--bb-primary, #10625C);
  opacity: 0.7;
  display: inline-block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.bb-old-article-link {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--bb-text-main, #334155) !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  display: inline-block !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  word-break: break-word;
}
.bb-old-article-link:hover {
  color: var(--bb-primary, #10625C) !important;
  font-weight: 600 !important;
  transform: translateX(3px);
  text-decoration: none !important;
}
.bb-old-item-row:hover .bb-old-bullet {
  color: var(--bb-primary, #10625C);
  opacity: 1;
  transform: translateX(2px);
}

html[data-bs-theme="dark"] .bb-old-article-link,
html[data-theme="dark"] .bb-old-article-link {
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .bb-old-article-link:hover,
html[data-theme="dark"] .bb-old-article-link:hover {
  color: #34d399 !important;
}
html[data-bs-theme="dark"] .bb-old-bullet,
html[data-theme="dark"] .bb-old-bullet {
  color: #34d399;
}
html[data-bs-theme="dark"] .bb-old-item-row td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   Center Feed & Content Area
   ========================================================================== */
.bb-center-content {
  min-width: 0; /* Prevents flex children from overflowing */
}

/* Overriding legacy table containers in main content */
.bb-center-content table {
  max-width: 100% !important;
}

/* ==========================================================================
   Modern Footer
   ========================================================================== */
.bb-footer {
  background: #0f172a;
  color: #94a3b8;
  font-size: 13px;
  margin-top: 40px;
  border-top: 3px solid #10b981;
}
.bb-footer-quote {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #f1f5f9;
  font-style: italic;
  font-size: 14px;
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}
.bb-footer-content {
  padding: 30px 0;
}
.bb-footer-brand {
  font-size: 22px;
  font-weight: 800;
  color: #34d399; /* Brand emerald green */
  letter-spacing: -0.5px;
  font-family: 'Outfit', 'Roboto', sans-serif;
  line-height: 1.1;
}
.bb-footer-brand span {
  color: #fbbf24; /* Golden yellow / amber */
}
.bb-footer a {
  color: #cbd5e1;
  text-decoration: none;
}
.bb-footer a:hover {
  color: #34d399;
  text-decoration: underline;
}

/* ==========================================================================
   Mobile Offcanvas Menu
   ========================================================================== */
.offcanvas {
  background-color: #ffffff;
}
.offcanvas-header {
  background: linear-gradient(135deg, #10625C 0%, #0c4d48 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.offcanvas-title {
  font-size: 18px;
  font-weight: 700;
}
.offcanvas-body {
  padding: 16px;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: #1e293b;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 4px;
  transition: all 0.15s ease;
}
.mobile-nav-link:hover, .mobile-nav-link.active {
  background: #e6f3f2;
  color: var(--bb-primary);
  font-weight: 600;
}
.mobile-nav-link i {
  font-size: 18px;
  color: var(--bb-primary);
}

/* ==========================================================================
   Responsive Overrides
   ========================================================================== */
@media (max-width: 991.98px) {
  /* On tablets and mobile: Stack nicely without horizontal overflow */
  body {
    font-size: 14px;
  }

  .bb-navbar {
    padding: 6px 0 !important;
  }
  .bb-brand {
    gap: 6px !important;
  }
  .bb-brand-emblem {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: 7px !important;
  }
  .bb-brand-title {
    font-size: 16px !important;
  }

  /* Sleek 1-row mobile action buttons */
  .bb-mobile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }
  .bb-mobile-actions .bb-font-btn,
  .bb-mobile-actions .bb-theme-toggle-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .bb-mobile-actions .bb-font-btn {
    font-size: 11px !important;
  }
  .bb-mobile-actions .btn-bb-write {
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .bb-mobile-actions .bb-mobile-coffee-btn {
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4) !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }
  .bb-mobile-actions .bb-mobile-coffee-btn:hover,
  .bb-mobile-actions .bb-mobile-coffee-btn:active {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.55) !important;
  }

  .bb-center-content {
    margin-bottom: 25px;
  }
  
  /* Make sidebars collapsible or compact on mobile */
  .left-sidebar, .right-sidebar {
    margin-top: 15px;
  }
}

@media (max-width: 575.98px) {
  .bb-mobile-actions {
    gap: 4px !important;
  }
  .bb-mobile-actions .bb-mobile-coffee-btn .bb-coffee-text,
  .bb-mobile-actions .btn-bb-write .bb-write-text {
    display: none !important;
  }
  .bb-mobile-actions .bb-mobile-coffee-btn,
  .bb-mobile-actions .btn-bb-write {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .bb-mobile-actions .bb-mobile-coffee-btn .bb-coffee-icon {
    font-size: 15px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  .bb-mobile-actions .btn-bb-write i {
    font-size: 13.5px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 375px) {
  .bb-mobile-actions {
    gap: 3px !important;
  }
  .bb-mobile-actions .bb-mobile-coffee-btn,
  .bb-mobile-actions .btn-bb-write,
  .bb-mobile-actions .bb-font-btn,
  .bb-mobile-actions .bb-theme-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
}

/* Mobile Floating Coffee Action Button */
.bb-mobile-floating-coffee {
  position: fixed;
  bottom: 22px;
  right: 16px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff !important;
  padding: 9px 15px;
  border-radius: 50px;
  box-shadow: 0 6px 20px -2px rgba(217, 119, 6, 0.5), 0 2px 6px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation: bb-fab-bounce 4s infinite ease-in-out;
}
.bb-mobile-floating-coffee:hover,
.bb-mobile-floating-coffee:active {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.65);
  color: #ffffff !important;
}
.bb-mobile-floating-coffee .bb-mfc-icon {
  font-size: 16px;
  line-height: 1;
}
@keyframes bb-fab-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Drawer Coffee Highlight Card */
.bb-drawer-coffee-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.18) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.bb-drawer-coffee-card:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.28) 100%);
  border-color: #d97706;
  transform: translateY(-1px);
}
.bb-drawer-coffee-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
  flex-shrink: 0;
}
html[data-bs-theme="dark"] .bb-drawer-coffee-card,
html[data-theme="dark"] .bb-drawer-coffee-card,
body.dark-mode .bb-drawer-coffee-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(180, 83, 9, 0.25) 100%);
  border-color: rgba(245, 158, 11, 0.3);
}
html[data-bs-theme="dark"] .bb-drawer-coffee-card .bb-drawer-coffee-title,
html[data-theme="dark"] .bb-drawer-coffee-card .bb-drawer-coffee-title,
body.dark-mode .bb-drawer-coffee-card .bb-drawer-coffee-title {
  color: #fbbf24 !important;
}

/* ==========================================================================
   Article Card Aesthetics (p_home.php & p_content.php enhancement)
   ========================================================================== */
.bb-center-content {
  min-width: 0 !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.bb-center-content table {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.bb-center-content table[bgcolor="035D8A"],
.bb-center-content table[bgcolor="#035D8A"] {
  background: var(--bb-surface) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius) !important;
  box-shadow: var(--bb-shadow-sm) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
  transition: all 0.2s ease-in-out !important;
}

.bb-center-content table[bgcolor="035D8A"]:hover,
.bb-center-content table[bgcolor="#035D8A"]:hover {
  box-shadow: var(--bb-shadow-hover) !important;
  transform: translateY(-2px);
}

.bb-center-content table[bgcolor="FFFFFF"],
.bb-center-content table[bgcolor="#FFFFFF"] {
  background: transparent !important;
}

/* Avatar styling */
.bb-center-content img[src*="topic/"],
.bb-center-content img[src*="no_profile"] {
  border-radius: 50% !important;
  width: 68px !important;
  height: 68px !important;
  object-fit: cover !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
  border: 2px solid #ffffff !important;
  margin-left: 14px !important;
  margin-bottom: 10px !important;
}

/* Content thumbnail */
.cont-img-thumb {
  border-radius: 8px !important;
  max-width: 170px !important;
  height: auto !important;
  object-fit: cover !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  transition: transform 0.2s ease !important;
}
.cont-img-thumb:hover {
  transform: scale(1.02);
}

/* Story Title */
.bb-center-content font[size="3"] b a {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
}
.bb-center-content font[size="3"] b a:hover {
  color: var(--bb-primary) !important;
}

/* Story Category Badge */
.storycat {
  background-color: #e6f3f2 !important;
  color: var(--bb-primary) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-right: 6px !important;
}

/* Mobile responsive fixes for articles */
@media (max-width: 576px) {
  .cont-img-thumb {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
  }
  .bb-center-content img[src*="topic/"],
  .bb-center-content img[src*="no_profile"] {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ==========================================================================
   Pagination Styling (Responsive & Modern - Biirbeh Brand Green)
   ========================================================================== */
.pagination,
ul.pagination {
  --bs-pagination-color: #10625C !important;
  --bs-pagination-bg: #ffffff !important;
  --bs-pagination-border-color: #e2e8f0 !important;
  --bs-pagination-hover-color: #0b4540 !important;
  --bs-pagination-hover-bg: #e6f3f2 !important;
  --bs-pagination-hover-border-color: #99d5cf !important;
  --bs-pagination-focus-color: #0b4540 !important;
  --bs-pagination-focus-bg: #e6f3f2 !important;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(16, 98, 92, 0.25) !important;
  --bs-pagination-active-color: #ffffff !important;
  --bs-pagination-active-bg: #10625C !important;
  --bs-pagination-active-border-color: #10625C !important;
  --bs-pagination-disabled-color: #94a3b8 !important;
  --bs-pagination-disabled-bg: #f8fafc !important;
  --bs-pagination-disabled-border-color: #f1f5f9 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.pagination .page-item .page-link,
ul.pagination .page-item .page-link,
.page-link {
  color: #10625C !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 500 !important;
  background-color: #ffffff !important;
  transition: all 0.15s ease-in-out !important;
  padding: 6px 12px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  text-decoration: none !important;
}

.pagination .page-item .page-link:hover,
ul.pagination .page-item .page-link:hover,
.page-link:hover {
  background-color: #e6f3f2 !important;
  border-color: #99d5cf !important;
  color: #0b4540 !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(16, 98, 92, 0.15) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item.active > .page-link,
ul.pagination .page-item.active .page-link,
ul.pagination .page-item.active > .page-link {
  background: linear-gradient(135deg, rgb(16, 98, 92) 0%, rgb(20, 122, 114) 100%) rgb(16, 98, 92) !important;
  border-color: rgb(16, 98, 92) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(16, 98, 92, 0.3) !important;
  cursor: default !important;
}

.pagination .page-item.disabled .page-link,
ul.pagination .page-item.disabled .page-link {
  color: #94a3b8 !important;
  background-color: #f8fafc !important;
  border-color: #f1f5f9 !important;
  box-shadow: none !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #10625C !important;
  box-shadow: 0 0 0 0.25rem rgba(16, 98, 92, 0.18) !important;
}

div.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 30px auto 20px auto !important;
  padding: 0 !important;
  list-style: none !important;
}

div.pagination a,
div.pagination span.current,
div.pagination span.disabled {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  border-radius: 8px !important;
  border: 1px solid var(--bb-border, #e2e8f0) !important;
  background-color: #ffffff !important;
  color: #10625C !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease-in-out !important;
}

div.pagination a:hover {
  background-color: #e6f3f2 !important;
  border-color: #99d5cf !important;
  color: var(--bb-primary-hover, #147a72) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(16, 98, 92, 0.12) !important;
}

div.pagination a:active {
  transform: translateY(0);
}

div.pagination span.current {
  background: linear-gradient(135deg, #10625C 0%, #147a72 100%) !important;
  border-color: #10625C !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(16, 98, 92, 0.28) !important;
  cursor: default !important;
}

div.pagination span.disabled {
  background-color: #f8fafc !important;
  border-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.65;
}

div.pagination .dots,
div.pagination span.dots,
div.pagination span.page-dots {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 38px !important;
  padding: 0 4px !important;
  color: #64748b !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 576px) {
  div.pagination {
    gap: 4px !important;
    margin: 20px auto 15px auto !important;
  }
  div.pagination a,
  div.pagination span.current,
  div.pagination span.disabled {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
  }
  div.pagination .dots,
  div.pagination span.dots,
  div.pagination span.page-dots {
    min-width: 18px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   Header Slider Component Styling (Modern, Rich, Responsive)
   ========================================================================== */
.bb-slider-container {
  width: 100%;
  border-radius: var(--bb-radius, 12px);
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--bb-border, #e6e6cc);
  background-color: #10625C;
}

.bb-slide-item {
  position: relative;
  width: 100%;
  height: 210px;
  background-size: cover;
  background-position: left center !important; /* Preserves entire left side calligraphy */
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
}

@media (min-width: 768px) {
  .bb-slide-item {
    height: 210px;
    background-position: left center !important;
  }
}

@media (min-width: 1200px) {
  .bb-slide-item {
    height: 210px;
    background-position: left center !important;
  }
}

@media (max-width: 576px) {
  .bb-slide-item {
    height: 140px;
    background-position: left center !important;
  }
}

.bb-slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Smooth horizontal fade: Transparent on the left artwork, softly graduating to the right */
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.25) 100%) !important;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Left side calligraphy is 100% unobstructed */
  padding: 15px 40px;
}

@media (max-width: 768px) {
  .bb-slide-overlay {
    padding: 10px 15px;
    justify-content: center;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 100%) !important;
  }
}

.bb-slide-content {
  max-width: 560px;
  color: #ffffff;
  z-index: 2;
  text-align: right;
  /* Rich, smooth gradient fade (уусгалт) that dissolves elegantly */
  background: linear-gradient(135deg, rgba(16, 98, 92, 0.94) 0%, rgba(12, 77, 72, 0.88) 55%, rgba(16, 98, 92, 0.72) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 14px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

@media (max-width: 768px) {
  .bb-slide-content {
    text-align: center;
    max-width: 100%;
    padding: 10px 14px;
  }
}

.bb-slide-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.bb-slide-title a {
  color: #ffffff !important;
  text-decoration: none;
}
.bb-slide-title a:hover {
  color: #fde047 !important;
}

@media (max-width: 576px) {
  .bb-slide-title {
    font-size: 16px;
  }
}

.bb-slide-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.45;
  margin-bottom: 12px;
}

/* Дэлгэрэнгүй тод товч - High contrast, extremely crisp and prominent */
.btn-bb-slide,
a.btn-bb-slide {
  background: #ffffff !important;
  color: #0c4d48 !important;
  border: 2px solid #ffffff !important;
  padding: 6px 18px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.btn-bb-slide:hover,
a.btn-bb-slide:hover {
  background: #fde047 !important; /* Radiant gold/yellow on hover */
  color: #0c4d48 !important;
  border-color: #fde047 !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
  text-decoration: none !important;
}

/* Indicators */
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.carousel-indicators .active {
  width: 24px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Controls */
.bb-control-btn {
  width: 38px;
  height: 38px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.2s ease;
}

.carousel-control-prev:hover .bb-control-btn,
.carousel-control-next:hover .bb-control-btn {
  background: rgba(30, 58, 138, 0.9);
  transform: scale(1.1);
}

.carousel-control-prev,
.carousel-control-next {
  width: 50px;
  opacity: 0.85;
}

/* Admin Quick Edit Button */
.bb-slider-admin-edit {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: all 0.2s ease;
}

.bb-slider-admin-edit:hover {
  background: #10625C;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ==========================================================================
   User & Member Module (Modern Card, Forms, Inputs, Buttons)
   ========================================================================== */
.bb-member-card {
  background: #ffffff;
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-border);
  box-shadow: var(--bb-shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

.bb-member-card .bb-widget-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bb-reg-form-card {
  background: transparent;
  border-radius: var(--bb-radius);
  padding: 10px;
}

.bb-reg-icon-wrapper {
  width: 52px;
  height: 52px;
  font-size: 24px;
  transition: all 0.2s ease;
}

.bb-reg-title {
  color: #1e3a8a;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.bb-reg-subtitle {
  color: #64748b;
}

.bb-reg-alert-success {
  background: #ecfdf5;
  border-left: 5px solid #10b981 !important;
  color: #065f46;
}

.bb-reg-alert-success .bb-alert-notice {
  background: #ffffff;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: #4b5563;
}

.bb-reg-alert-success .bb-alert-text {
  color: #111827;
}

.bb-reg-alert-danger {
  background: #fff1f2;
  border-left: 4px solid #f43f5e !important;
}

/* Neutralize legacy tables inside member card */
.bb-member-card table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}

.bb-member-card td[bgcolor="#FFFFE6"] {
  background-color: transparent !important;
}

.bb-member-card input.input,
.bb-member-card input[type="text"],
.bb-member-card input[type="password"],
.bb-member-card input[type="email"],
.bb-member-card select,
.bb-member-card textarea {
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
  font-size: 13.5px;
  color: #1e293b;
  background-color: #f8fafc;
  transition: all 0.2s ease;
  outline: none;
}

.bb-member-card input:focus,
.bb-member-card select:focus,
.bb-member-card textarea:focus {
  border-color: var(--bb-primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

/* Modern styling for Bootstrap inputs in user forms */
.bb-reg-form-card .form-control,
.bb-reg-form-card .form-select {
  border-radius: 8px;
  border-color: #cbd5e1;
  background-color: #f8fafc;
  padding: 9px 13px;
  font-size: 13.5px;
  color: #1e293b;
  transition: all 0.2s ease;
}

.bb-reg-form-card .form-control:focus,
.bb-reg-form-card .form-select:focus {
  background-color: #ffffff;
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}

.bb-reg-form-card .input-group-text {
  border-color: #cbd5e1;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 14px;
}

.bb-reg-form-card .bb-btn-toggle-pass,
.bb-reg-form-card .input-group .btn-outline-secondary {
  border-color: #cbd5e1;
  background-color: #f1f5f9;
  color: #64748b;
}

.bb-reg-form-card .bb-btn-toggle-pass:hover,
.bb-reg-form-card .input-group .btn-outline-secondary:hover {
  background-color: #e2e8f0;
  color: #1e293b;
  border-color: #cbd5e1;
}

/* ==========================================================================
   Full Width (100% Screen) Fluid Layout
   ========================================================================== */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: clamp(14px, 1.8vw, 28px) !important;
  padding-right: clamp(14px, 1.8vw, 28px) !important;
}

@media (min-width: 1400px) {
  .bb-slide-item {
    height: 210px;
    background-position: left center !important;
  }
}

@media (min-width: 1680px) {
  .bb-slide-item {
    height: 210px;
    background-position: left center !important;
  }
}

@media (min-width: 1920px) {
  .bb-slide-item {
    height: 210px;
    background-position: left center !important;
  }
}

@media (min-width: 2100px) {
  .bb-slide-item {
    height: 210px;
    background-position: left center !important;
  }
}

/* ==========================================================================
   Poll Module Modern Styling (p_poll.php & block-Survey.php)
   ========================================================================== */
.bb-poll-card {
  background: var(--bb-surface, #ffffff);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-sm);
  padding: 24px;
  margin-bottom: 24px;
  transition: box-shadow 0.2s ease;
}
.bb-poll-card:hover {
  box-shadow: var(--bb-shadow);
}

.bb-poll-header {
  border-bottom: 1px solid var(--bb-border-subtle);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.bb-poll-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  margin-bottom: 8px;
}

.bb-poll-option-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  margin-bottom: 10px;
}
.bb-poll-option-item:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
}
.bb-poll-option-item.selected,
.bb-poll-option-item:has(input:checked) {
  border-color: #10625C;
  background-color: #e6f3f2;
  box-shadow: 0 0 0 1px #10625C;
}

.bb-poll-progress-track {
  background-color: #f1f5f9;
  border-radius: 8px;
  height: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.bb-poll-progress-fill {
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 2rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Sidebar Poll Widget Styling */
.bb-survey-option {
  display: flex;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.bb-survey-option:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}
.bb-survey-option:has(input:checked) {
  border-color: #10625C;
  background-color: #e6f3f2;
}
.bb-survey-option input[type="radio"] {
  margin-top: 3px;
  margin-right: 8px;
  cursor: pointer;
}

/* Poll List Items (Recent / Archive) */
.bb-poll-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s ease;
}
.bb-poll-list-item:last-child {
  border-bottom: none;
}
.bb-poll-list-item:hover {
  background-color: #f8fafc;
}
.bb-poll-list-item a {
  font-weight: 500;
  color: #1e293b;
}
.bb-poll-list-item a:hover {
  color: #10625C;
}

/* ==========================================================================
   Admin Modern Blank Layout & Cards
   ========================================================================== */
.bb-admin-main-area,
.bb-moderator-main-area {
  width: 100%;
}

.bb-content-card,
.bb-admin-author-wrapper {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

/* Tables inside admin panels */
.bb-content-card table,
.bb-admin-author-wrapper table {
  background-color: transparent !important;
}

.bb-admin-author-wrapper #datatable_authors,
.bb-content-card #datatable_content,
.bb-content-card #datatable_users,
.bb-content-card #datatable_logs,
.bb-content-card #datatable_reviews {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  width: 100% !important;
}

.bb-admin-author-wrapper #datatable_authors thead th,
.bb-content-card #datatable_content thead th,
.bb-content-card #datatable_users thead th,
.bb-content-card #datatable_logs thead th,
.bb-content-card #datatable_reviews thead th {
  background-color: #10625C !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 8px !important;
  border: none !important;
}

.bb-admin-author-wrapper #datatable_authors tbody td,
.bb-content-card #datatable_content tbody td,
.bb-content-card #datatable_users tbody td,
.bb-content-card #datatable_logs tbody td,
.bb-content-card #datatable_reviews tbody td {
  padding: 8px 10px !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

.bb-admin-author-wrapper #datatable_authors tbody td {
  padding: 4px 6px !important;
}

.bb-admin-author-wrapper #datatable_authors img,
#datatable_authors img {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  display: inline-block !important;
}


/* Smooth row hover transition */
.bb-admin-author-wrapper #datatable_authors tbody tr,
.bb-content-card #datatable_content tbody tr,
.bb-content-card #datatable_users tbody tr,
.bb-content-card #datatable_logs tbody tr,
.bb-content-card #datatable_reviews tbody tr,
.bb-admin-main-area table tbody tr {
  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Enhanced table row mouse over (hover) - distinct, modern tinted highlight instead of washed out white */
.bb-admin-author-wrapper #datatable_authors tbody tr:hover,
.bb-admin-author-wrapper #datatable_authors tbody tr:hover > td,
.bb-content-card #datatable_content tbody tr:hover,
.bb-content-card #datatable_content tbody tr:hover > td,
.bb-content-card #datatable_users tbody tr:hover,
.bb-content-card #datatable_users tbody tr:hover > td,
.bb-content-card #datatable_logs tbody tr:hover,
.bb-content-card #datatable_logs tbody tr:hover > td,
.bb-content-card #datatable_reviews tbody tr:hover,
.bb-content-card #datatable_reviews tbody tr:hover > td,
.bb-admin-main-area table.table-hover tbody tr:hover,
.bb-admin-main-area table.table-hover tbody tr:hover > *,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr:hover > td,
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr:hover > td {
  background-color: #dbeee9 !important; /* Soft, clearly visible pine-teal tint */
  box-shadow: none !important;
}

/* DataTables sorted column on hover */
table.dataTable.display tbody tr:hover > td.sorting_1,
table.dataTable.display tbody tr:hover > td.sorting_2 {
  background-color: #d1e8e2 !important;
  box-shadow: none !important;
}

/* Left accent indicator bar on hovered row in Light Mode (4px line) */
#datatable_logs tbody tr:hover td:first-child,
.bb-content-card #datatable_logs tbody tr:hover td:first-child,
#datatable_users tbody tr:hover td:first-child,
.bb-content-card #datatable_users tbody tr:hover td:first-child,
#datatable_content tbody tr:hover td:first-child,
.bb-content-card #datatable_content tbody tr:hover td:first-child,
#datatable_reviews tbody tr:hover td:first-child,
.bb-content-card #datatable_reviews tbody tr:hover td:first-child,
#datatable_authors tbody tr:hover td:first-child,
.bb-admin-author-wrapper #datatable_authors tbody tr:hover td:first-child,
.bb-admin-main-area table.table-hover tbody tr:hover td:first-child,
table.table-hover tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 #10625C !important;
}

/* Table row mouse over in Dark Mode (prevents bright/white hover in slide_manager, user_manager, etc) */
html[data-bs-theme="dark"] #datatable_logs tbody tr:hover,
html[data-bs-theme="dark"] #datatable_logs tbody tr:hover > td,
html[data-bs-theme="dark"] .bb-content-card #datatable_logs tbody tr:hover,
html[data-bs-theme="dark"] .bb-content-card #datatable_logs tbody tr:hover > td,
html[data-bs-theme="dark"] .bb-admin-author-wrapper #datatable_authors tbody tr:hover,
html[data-bs-theme="dark"] .bb-admin-author-wrapper #datatable_authors tbody tr:hover > td,
html[data-bs-theme="dark"] .bb-content-card #datatable_content tbody tr:hover,
html[data-bs-theme="dark"] .bb-content-card #datatable_content tbody tr:hover > td,
html[data-bs-theme="dark"] .bb-content-card #datatable_users tbody tr:hover,
html[data-bs-theme="dark"] .bb-content-card #datatable_users tbody tr:hover > td,
html[data-bs-theme="dark"] .bb-content-card #datatable_reviews tbody tr:hover,
html[data-bs-theme="dark"] .bb-content-card #datatable_reviews tbody tr:hover > td,
html[data-bs-theme="dark"] .bb-admin-main-area table.table-hover tbody tr:hover,
html[data-bs-theme="dark"] .bb-admin-main-area table.table-hover tbody tr:hover > *,
html[data-bs-theme="dark"] table.table-hover tbody tr:hover,
html[data-bs-theme="dark"] table.table-hover tbody tr:hover > *,
html[data-theme="dark"] #datatable_logs tbody tr:hover,
html[data-theme="dark"] #datatable_logs tbody tr:hover > td,
html[data-theme="dark"] .bb-content-card #datatable_logs tbody tr:hover,
html[data-theme="dark"] .bb-content-card #datatable_logs tbody tr:hover > td,
html[data-theme="dark"] .bb-admin-author-wrapper #datatable_authors tbody tr:hover,
html[data-theme="dark"] .bb-admin-author-wrapper #datatable_authors tbody tr:hover > td,
html[data-theme="dark"] .bb-content-card #datatable_content tbody tr:hover,
html[data-theme="dark"] .bb-content-card #datatable_content tbody tr:hover > td,
html[data-theme="dark"] .bb-content-card #datatable_users tbody tr:hover,
html[data-theme="dark"] .bb-content-card #datatable_users tbody tr:hover > td,
html[data-theme="dark"] .bb-content-card #datatable_reviews tbody tr:hover,
html[data-theme="dark"] .bb-content-card #datatable_reviews tbody tr:hover > td,
html[data-theme="dark"] .bb-admin-main-area table.table-hover tbody tr:hover,
html[data-theme="dark"] .bb-admin-main-area table.table-hover tbody tr:hover > *,
html[data-theme="dark"] table.table-hover tbody tr:hover,
html[data-theme="dark"] table.table-hover tbody tr:hover > *,
body.dark-mode #datatable_logs tbody tr:hover,
body.dark-mode #datatable_logs tbody tr:hover > td,
body.dark-mode .bb-content-card #datatable_logs tbody tr:hover,
body.dark-mode .bb-content-card #datatable_logs tbody tr:hover > td,
body.dark-mode .bb-admin-author-wrapper #datatable_authors tbody tr:hover,
body.dark-mode .bb-admin-author-wrapper #datatable_authors tbody tr:hover > td,
body.dark-mode .bb-content-card #datatable_content tbody tr:hover,
body.dark-mode .bb-content-card #datatable_content tbody tr:hover > td,
body.dark-mode .bb-content-card #datatable_users tbody tr:hover,
body.dark-mode .bb-content-card #datatable_users tbody tr:hover > td,
body.dark-mode .bb-content-card #datatable_reviews tbody tr:hover,
body.dark-mode .bb-content-card #datatable_reviews tbody tr:hover > td,
body.dark-mode .bb-admin-main-area table.table-hover tbody tr:hover,
body.dark-mode .bb-admin-main-area table.table-hover tbody tr:hover > *,
body.dark-mode table.table-hover tbody tr:hover,
body.dark-mode table.table-hover tbody tr:hover > *,
html[data-bs-theme="dark"] table.dataTable.display tbody tr:hover,
html[data-bs-theme="dark"] table.dataTable.display tbody tr:hover > td,
html[data-theme="dark"] table.dataTable.display tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > td,
body.dark-mode table.dataTable.display tbody tr:hover,
body.dark-mode table.dataTable.display tbody tr:hover > td {
  background-color: #1a383d !important; /* Deep luminous teal in dark mode */
  color: #f1f5f9 !important;
  --bs-table-hover-bg: #1a383d !important;
  --bs-table-bg-state: #1a383d !important;
  box-shadow: none !important;
}

html[data-bs-theme="dark"] table.dataTable.display tbody tr:hover > td.sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > td.sorting_1,
body.dark-mode table.dataTable.display tbody tr:hover > td.sorting_1 {
  background-color: #153136 !important;
  box-shadow: none !important;
}

/* Left accent indicator bar on hovered row in Dark Mode (4px teal line) */
html[data-bs-theme="dark"] #datatable_logs tbody tr:hover td:first-child,
html[data-bs-theme="dark"] .bb-content-card #datatable_logs tbody tr:hover td:first-child,
html[data-theme="dark"] #datatable_logs tbody tr:hover td:first-child,
html[data-theme="dark"] .bb-content-card #datatable_logs tbody tr:hover td:first-child,
body.dark-mode #datatable_logs tbody tr:hover td:first-child,
body.dark-mode .bb-content-card #datatable_logs tbody tr:hover td:first-child,

html[data-bs-theme="dark"] #datatable_users tbody tr:hover td:first-child,
html[data-bs-theme="dark"] .bb-content-card #datatable_users tbody tr:hover td:first-child,
html[data-theme="dark"] #datatable_users tbody tr:hover td:first-child,
html[data-theme="dark"] .bb-content-card #datatable_users tbody tr:hover td:first-child,
body.dark-mode #datatable_users tbody tr:hover td:first-child,
body.dark-mode .bb-content-card #datatable_users tbody tr:hover td:first-child,

html[data-bs-theme="dark"] #datatable_content tbody tr:hover td:first-child,
html[data-bs-theme="dark"] .bb-content-card #datatable_content tbody tr:hover td:first-child,
html[data-theme="dark"] #datatable_content tbody tr:hover td:first-child,
html[data-theme="dark"] .bb-content-card #datatable_content tbody tr:hover td:first-child,
body.dark-mode #datatable_content tbody tr:hover td:first-child,
body.dark-mode .bb-content-card #datatable_content tbody tr:hover td:first-child,

html[data-bs-theme="dark"] #datatable_reviews tbody tr:hover td:first-child,
html[data-bs-theme="dark"] .bb-content-card #datatable_reviews tbody tr:hover td:first-child,
html[data-theme="dark"] #datatable_reviews tbody tr:hover td:first-child,
html[data-theme="dark"] .bb-content-card #datatable_reviews tbody tr:hover td:first-child,
body.dark-mode #datatable_reviews tbody tr:hover td:first-child,
body.dark-mode .bb-content-card #datatable_reviews tbody tr:hover td:first-child,

html[data-bs-theme="dark"] #datatable_authors tbody tr:hover td:first-child,
html[data-bs-theme="dark"] .bb-admin-author-wrapper #datatable_authors tbody tr:hover td:first-child,
html[data-theme="dark"] #datatable_authors tbody tr:hover td:first-child,
html[data-theme="dark"] .bb-admin-author-wrapper #datatable_authors tbody tr:hover td:first-child,
body.dark-mode #datatable_authors tbody tr:hover td:first-child,
body.dark-mode .bb-admin-author-wrapper #datatable_authors tbody tr:hover td:first-child,

html[data-bs-theme="dark"] .bb-admin-main-area table.table-hover tbody tr:hover td:first-child,
html[data-theme="dark"] .bb-admin-main-area table.table-hover tbody tr:hover td:first-child,
body.dark-mode .bb-admin-main-area table.table-hover tbody tr:hover td:first-child,
html[data-bs-theme="dark"] table.table-hover tbody tr:hover td:first-child,
html[data-theme="dark"] table.table-hover tbody tr:hover td:first-child,
body.dark-mode table.table-hover tbody tr:hover td:first-child {
  box-shadow: inset 4px 0 0 #2dd4bf !important;
}

/* Ensure text readability on hovered row in dark mode */
html[data-bs-theme="dark"] #datatable_logs tbody tr:hover td,
html[data-theme="dark"] #datatable_logs tbody tr:hover td,
body.dark-mode #datatable_logs tbody tr:hover td,
html[data-bs-theme="dark"] #datatable_logs tbody tr:hover td .text-body,
html[data-theme="dark"] #datatable_logs tbody tr:hover td .text-body,
body.dark-mode #datatable_logs tbody tr:hover td .text-body,
html[data-bs-theme="dark"] #datatable_logs tbody tr:hover td .text-dark,
html[data-theme="dark"] #datatable_logs tbody tr:hover td .text-dark,
body.dark-mode #datatable_logs tbody tr:hover td .text-dark {
  color: #f8fafc !important;
}

/* Dark mode fixes for table typography & headers (slide_manager, etc.) */
html[data-bs-theme="dark"] .table .text-dark,
html[data-theme="dark"] .table .text-dark,
body.dark-mode .table .text-dark,
html[data-bs-theme="dark"] .bb-admin-main-area .text-dark,
html[data-theme="dark"] .bb-admin-main-area .text-dark,
body.dark-mode .bb-admin-main-area .text-dark {
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] table thead.table-light,
html[data-bs-theme="dark"] table thead.table-light th,
html[data-theme="dark"] table thead.table-light,
html[data-theme="dark"] table thead.table-light th,
body.dark-mode table thead.table-light,
body.dark-mode table thead.table-light th {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* User Profile Header Card in User Manager View (index.php?sel=user_manager&f=view) */
.user-profile-header-card {
  background: linear-gradient(135deg, #f8faff 0%, #eef4fc 100%) !important;
  border: 1px solid #e2e8f0 !important;
}
.user-profile-header-card .user-profile-name {
  color: #0f172a !important;
}

/* User Profile Header Card in Dark Mode */
html[data-bs-theme="dark"] .user-profile-header-card,
html[data-theme="dark"] .user-profile-header-card,
body.dark-mode .user-profile-header-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .user-profile-header-card .user-profile-name,
html[data-theme="dark"] .user-profile-header-card .user-profile-name,
body.dark-mode .user-profile-header-card .user-profile-name,
html[data-bs-theme="dark"] .user-profile-header-card h4,
html[data-theme="dark"] .user-profile-header-card h4,
body.dark-mode .user-profile-header-card h4 {
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .user-profile-header-card .text-muted,
html[data-theme="dark"] .user-profile-header-card .text-muted,
body.dark-mode .user-profile-header-card .text-muted,
html[data-bs-theme="dark"] .user-profile-header-card .text-secondary,
html[data-theme="dark"] .user-profile-header-card .text-secondary,
body.dark-mode .user-profile-header-card .text-secondary {
  color: #94a3b8 !important;
}

/* Action buttons in user profile header card in Dark Mode */
html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-warning,
html[data-theme="dark"] .user-profile-header-card .btn-outline-warning,
body.dark-mode .user-profile-header-card .btn-outline-warning {
  color: #fde047 !important;
  border-color: #ca8a04 !important;
  background-color: rgba(234, 179, 8, 0.12) !important;
}
html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-warning:hover,
html[data-theme="dark"] .user-profile-header-card .btn-outline-warning:hover,
body.dark-mode .user-profile-header-card .btn-outline-warning:hover {
  background-color: #ca8a04 !important;
  color: #0f172a !important;
}

html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-success,
html[data-theme="dark"] .user-profile-header-card .btn-outline-success,
body.dark-mode .user-profile-header-card .btn-outline-success {
  color: #4ade80 !important;
  border-color: #16a34a !important;
  background-color: rgba(34, 197, 94, 0.12) !important;
}

html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-primary,
html[data-theme="dark"] .user-profile-header-card .btn-outline-primary,
body.dark-mode .user-profile-header-card .btn-outline-primary {
  color: #60a5fa !important;
  border-color: #2563eb !important;
  background-color: rgba(59, 130, 246, 0.12) !important;
}
html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-primary:hover,
html[data-theme="dark"] .user-profile-header-card .btn-outline-primary:hover,
body.dark-mode .user-profile-header-card .btn-outline-primary:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-secondary,
html[data-theme="dark"] .user-profile-header-card .btn-outline-secondary,
body.dark-mode .user-profile-header-card .btn-outline-secondary {
  color: #cbd5e1 !important;
  border-color: #475569 !important;
  background-color: rgba(71, 85, 105, 0.18) !important;
}
html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-secondary:hover,
html[data-theme="dark"] .user-profile-header-card .btn-outline-secondary:hover,
body.dark-mode .user-profile-header-card .btn-outline-secondary:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-info,
html[data-theme="dark"] .user-profile-header-card .btn-outline-info,
body.dark-mode .user-profile-header-card .btn-outline-info {
  color: #38bdf8 !important;
  border-color: #0284c7 !important;
  background-color: rgba(2, 132, 199, 0.12) !important;
}
html[data-bs-theme="dark"] .user-profile-header-card .btn-outline-info:hover,
html[data-theme="dark"] .user-profile-header-card .btn-outline-info:hover,
body.dark-mode .user-profile-header-card .btn-outline-info:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

/* User view list-group cards in dark mode */
html[data-bs-theme="dark"] .list-group-item,
html[data-theme="dark"] .list-group-item,
body.dark-mode .list-group-item {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text-main) !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .card-header.bg-white,
html[data-theme="dark"] .card-header.bg-white,
body.dark-mode .card-header.bg-white {
  background-color: var(--bb-surface) !important;
  border-color: #334155 !important;
  color: var(--bb-text-main) !important;
}


/* DataTables search input refinement */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 10px !important;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #10625C !important;
  box-shadow: 0 0 0 2px rgba(16, 98, 92, 0.15) !important;
}

/* User manager & table action column button row (strictly single line) */
.action-btn-group {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
}

.action-btn-group .btn {
  padding: 3px 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Gallery Single View Styles
   ========================================================================== */
.bb-gallery-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

.bb-gallery-main-container {
  position: relative;
  display: block;
  width: 100%;
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
}

.bb-gallery-main-container a {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

.bb-gallery-main-img {
  max-height: 72vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.bb-gallery-main-container a:hover .bb-gallery-main-img {
  transform: scale(1.012);
  filter: brightness(1.04);
}

.bb-gallery-zoom-badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.2s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.bb-gallery-main-container a:hover .bb-gallery-zoom-badge {
  background: #1e3a8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   DAY / NIGHT (DARK MODE) SYSTEM
   ========================================================================== */
html[data-bs-theme="dark"],
html[data-theme="dark"],
body.dark-mode {
  --bb-bg: #0b1120;
  --bb-surface: #151f32;
  --bb-surface-card: #151f32;
  --bb-text-main: #f8fafc;
  --bb-text-muted: #94a3b8;
  --bb-text-light: #64748b;
  --bb-border: #223049;
  --bb-border-subtle: #19253b;
  
  --bb-primary: #10b981;
  --bb-primary-hover: #34d399;
  --bb-accent: #f87171;
  --bb-teal: #14b8a6;
  --bb-teal-hover: #2dd4bf;
  --bb-gold: #fbbf24;
  
  --bb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --bb-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  --bb-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.65);
}

/* Background & Global text in Dark Mode */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body,
html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-mode {
  background-color: var(--bb-bg) !important;
  color: var(--bb-text-main) !important;
}

/* Links in Dark Mode: Clean Light Slate with Emerald Hover */
html[data-bs-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not([class*="gs-"]):not([class*="gsc-"]),
html[data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not([class*="gs-"]):not([class*="gsc-"]),
body.dark-mode a:not(.btn):not(.badge):not(.nav-link):not([class*="gs-"]):not([class*="gsc-"]) {
  color: #e2e8f0;
  text-decoration: none;
  transition: color 0.15s ease;
}
html[data-bs-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not([class*="gs-"]):not([class*="gsc-"]):hover,
html[data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link):not([class*="gs-"]):not([class*="gsc-"]):hover,
body.dark-mode a:not(.btn):not(.badge):not(.nav-link):not([class*="gs-"]):not([class*="gsc-"]):hover {
  color: #34d399 !important;
  text-decoration: underline;
}

/* Google Custom Search Engine (CSE) title and result links: Always legible in light & dark mode */
.gsc-results-wrapper-overlay,
.gsc-results-wrapper-visible {
  color: #202124 !important;
}
.gsc-control-cse a.gs-title,
.gsc-control-cse .gs-title a,
.gsc-control-cse .gs-title,
.gsc-results-wrapper-overlay a.gs-title,
.gsc-results-wrapper-overlay .gs-title a,
.gsc-results-wrapper-overlay .gs-title,
.gsc-results-wrapper-overlay .gs-webResult .gs-title a,
.gsc-results-wrapper-overlay .gsc-table-result .gs-title a,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay a.gs-title,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gs-title a,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gs-title,
html[data-bs-theme="dark"] .gsc-control-cse a.gs-title,
html[data-bs-theme="dark"] .gsc-control-cse .gs-title a,
html[data-theme="dark"] .gsc-results-wrapper-overlay a.gs-title,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gs-title a,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gs-title,
html[data-theme="dark"] .gsc-control-cse a.gs-title,
html[data-theme="dark"] .gsc-control-cse .gs-title a,
body.dark-mode .gsc-results-wrapper-overlay a.gs-title,
body.dark-mode .gsc-results-wrapper-overlay .gs-title a,
body.dark-mode .gsc-results-wrapper-overlay .gs-title,
body.dark-mode .gsc-control-cse a.gs-title,
body.dark-mode .gsc-control-cse .gs-title a {
  color: #1a0dab !important;
  text-decoration: underline !important;
}
.gsc-control-cse a.gs-title:visited,
.gsc-control-cse .gs-title a:visited,
.gsc-results-wrapper-overlay a.gs-title:visited,
.gsc-results-wrapper-overlay .gs-title a:visited,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay a.gs-title:visited,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gs-title a:visited,
html[data-theme="dark"] .gsc-results-wrapper-overlay a.gs-title:visited,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gs-title a:visited,
body.dark-mode .gsc-results-wrapper-overlay a.gs-title:visited,
body.dark-mode .gsc-results-wrapper-overlay .gs-title a:visited {
  color: #4b11a8 !important;
}
.gsc-control-cse a.gs-title:hover,
.gsc-control-cse .gs-title a:hover,
.gsc-results-wrapper-overlay a.gs-title:hover,
.gsc-results-wrapper-overlay .gs-title a:hover,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay a.gs-title:hover,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gs-title a:hover,
html[data-theme="dark"] .gsc-results-wrapper-overlay a.gs-title:hover,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gs-title a:hover,
body.dark-mode .gsc-results-wrapper-overlay a.gs-title:hover,
body.dark-mode .gsc-results-wrapper-overlay .gs-title a:hover {
  color: #1a0dab !important;
  text-decoration: underline !important;
}
.gsc-results-wrapper-overlay .gs-title b,
.gsc-results-wrapper-overlay a.gs-title b,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gs-title b,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gs-title b,
body.dark-mode .gsc-results-wrapper-overlay .gs-title b {
  color: inherit !important;
}
.gsc-results-wrapper-overlay .gs-snippet,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gs-snippet,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gs-snippet,
body.dark-mode .gsc-results-wrapper-overlay .gs-snippet {
  color: #3c4043 !important;
}
.gsc-results-wrapper-overlay .gs-visibleUrl,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gs-visibleUrl,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gs-visibleUrl,
body.dark-mode .gsc-results-wrapper-overlay .gs-visibleUrl {
  color: #006621 !important;
}
.gsc-results-wrapper-overlay .gsc-cursor-page,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gsc-cursor-page,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gsc-cursor-page,
body.dark-mode .gsc-results-wrapper-overlay .gsc-cursor-page {
  color: #1a0dab !important;
}
.gsc-results-wrapper-overlay .gsc-cursor-current-page,
html[data-bs-theme="dark"] .gsc-results-wrapper-overlay .gsc-cursor-current-page,
html[data-theme="dark"] .gsc-results-wrapper-overlay .gsc-cursor-current-page,
body.dark-mode .gsc-results-wrapper-overlay .gsc-cursor-current-page {
  color: #202124 !important;
  font-weight: 700 !important;
}

/* Headings and Titles in Dark Mode: Crisp White-Slate */
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] .h1,
html[data-bs-theme="dark"] .h2,
html[data-bs-theme="dark"] .h3,
html[data-bs-theme="dark"] .h4,
html[data-bs-theme="dark"] .h5,
html[data-bs-theme="dark"] .h6,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f8fafc !important;
}

/* Header & Navbar */
html[data-bs-theme="dark"] .bb-header,
html[data-theme="dark"] .bb-header {
  background: rgba(17, 26, 46, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
html[data-bs-theme="dark"] .bb-navbar,
html[data-theme="dark"] .bb-navbar {
  background: transparent !important;
}
html[data-bs-theme="dark"] .bb-header-top,
html[data-theme="dark"] .bb-header-top {
  background: linear-gradient(135deg, #070c18 0%, #0d1527 100%) !important;
  border-bottom: 1px solid #1e293b !important;
}
html[data-bs-theme="dark"] .bb-brand-emblem,
html[data-theme="dark"] .bb-brand-emblem {
  background: linear-gradient(135deg, #10b981 0%, #0d9488 100%) !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3) !important;
}
html[data-bs-theme="dark"] .bb-brand-title,
html[data-theme="dark"] .bb-brand-title {
  color: #34d399 !important;
}
html[data-bs-theme="dark"] .bb-brand-title span,
html[data-theme="dark"] .bb-brand-title span {
  color: #fbbf24 !important;
  text-shadow: 0 1px 4px rgba(251, 191, 36, 0.25) !important;
}
html[data-bs-theme="dark"] .bb-brand-subtitle,
html[data-theme="dark"] .bb-brand-subtitle {
  color: #6ee7b7 !important;
}
html[data-bs-theme="dark"] .bb-nav-item,
html[data-theme="dark"] .bb-nav-item {
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .bb-nav-item:hover,
html[data-theme="dark"] .bb-nav-item:hover {
  color: #34d399 !important;
  background-color: rgba(16, 185, 129, 0.12) !important;
  transform: translateY(-1px);
}
html[data-bs-theme="dark"] .bb-nav-item.active,
html[data-theme="dark"] .bb-nav-item.active {
  color: #34d399 !important;
  background-color: rgba(16, 185, 129, 0.16) !important;
  box-shadow: inset 0 -2px 0 #10b981 !important;
}

/* Offcanvas Mobile Drawer */
html[data-bs-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas {
  background-color: #111a2e !important;
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .offcanvas .mobile-nav-link,
html[data-theme="dark"] .offcanvas .mobile-nav-link {
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .offcanvas .mobile-nav-link:hover,
html[data-theme="dark"] .offcanvas .mobile-nav-link:hover {
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.1) !important;
}
html[data-bs-theme="dark"] .offcanvas .mobile-nav-link.active,
html[data-theme="dark"] .offcanvas .mobile-nav-link.active {
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

/* Content cards, Widgets, Cards */
html[data-bs-theme="dark"] .bb-poll-card,
html[data-theme="dark"] .bb-poll-card,
body.dark-mode .bb-poll-card,
html[data-bs-theme="dark"] .bb-content-card,
html[data-theme="dark"] .bb-content-card,
html[data-bs-theme="dark"] .bb-widget,
html[data-theme="dark"] .bb-widget,
html[data-bs-theme="dark"] .card:not(.bg-primary):not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info),
html[data-theme="dark"] .card:not(.bg-primary):not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info),
html[data-bs-theme="dark"] .card-header.bg-white,
html[data-theme="dark"] .card-header.bg-white,
html[data-bs-theme="dark"] .card-body.bg-white,
html[data-theme="dark"] .card-body.bg-white,
html[data-bs-theme="dark"] .card-footer.bg-white,
html[data-theme="dark"] .card-footer.bg-white,
html[data-bs-theme="dark"] .card-footer.bg-light,
html[data-theme="dark"] .card-footer.bg-light,
html[data-bs-theme="dark"] .list-group-item,
html[data-theme="dark"] .list-group-item {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text-main) !important;
  border-color: var(--bb-border) !important;
}

html[data-bs-theme="dark"] .bb-widget-body,
html[data-theme="dark"] .bb-widget-body {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text-main) !important;
}

html[data-bs-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white {
  background-color: var(--bb-surface) !important;
}

html[data-bs-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-light {
  background-color: #19253b !important;
  color: #e2e8f0 !important;
}

html[data-bs-theme="dark"] .border,
html[data-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end,
html[data-theme="dark"] .border-end {
  border-color: var(--bb-border) !important;
}

html[data-bs-theme="dark"] .text-dark,
html[data-theme="dark"] .text-dark {
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .text-muted,
html[data-theme="dark"] .text-muted {
  color: #94a3b8 !important;
}

html[data-bs-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-secondary {
  color: #cbd5e1 !important;
}

/* Category Story Badges & Authors */
html[data-bs-theme="dark"] .storycat,
html[data-theme="dark"] .storycat,
body.dark-mode .storycat {
  background-color: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border-radius: 4px;
  padding: 1px 6px;
}

html[data-bs-theme="dark"] .bb-widget-list li a,
html[data-theme="dark"] .bb-widget-list li a,
html[data-bs-theme="dark"] .bb-widget-body a,
html[data-theme="dark"] .bb-widget-body a,
body.dark-mode .bb-widget-body a {
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .bb-widget-list li a:hover,
html[data-theme="dark"] .bb-widget-list li a:hover,
html[data-bs-theme="dark"] .bb-widget-body a:hover,
html[data-theme="dark"] .bb-widget-body a:hover,
body.dark-mode .bb-widget-body a:hover {
  color: #34d399 !important;
}

/* Left Sidebar Admin Panel icons and badges */
html[data-bs-theme="dark"] .bb-widget .text-primary,
html[data-theme="dark"] .bb-widget .text-primary,
html[data-bs-theme="dark"] .bb-widget .text-info,
html[data-theme="dark"] .bb-widget .text-info {
  color: #14b8a6 !important;
}
html[data-bs-theme="dark"] .bb-widget .badge.bg-light.text-primary,
html[data-theme="dark"] .bb-widget .badge.bg-light.text-primary {
  background-color: #19253b !important;
  color: #2dd4bf !important;
  border-color: #223049 !important;
}
html[data-bs-theme="dark"] .bb-widget .badge.bg-light.text-primary:hover,
html[data-theme="dark"] .bb-widget .badge.bg-light.text-primary:hover {
  background-color: #0d9488 !important;
  color: #ffffff !important;
  border-color: #0d9488 !important;
}

/* Tables */
html[data-bs-theme="dark"] .table,
html[data-theme="dark"] .table {
  color: #f1f5f9 !important;
  border-color: var(--bb-border) !important;
}
html[data-bs-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-color: var(--bb-border) !important;
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .table thead.table-light,
html[data-theme="dark"] .table thead.table-light,
html[data-bs-theme="dark"] .table-light,
html[data-theme="dark"] .table-light {
  background-color: #19253b !important;
  color: #f8fafc !important;
  border-color: var(--bb-border) !important;
}
html[data-bs-theme="dark"] .table thead.table-light th,
html[data-theme="dark"] .table thead.table-light th {
  background-color: #19253b !important;
  color: #f8fafc !important;
}
html[data-bs-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Form Controls */
html[data-bs-theme="dark"] .form-control,
html[data-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-theme="dark"] .form-select {
  background-color: #0b1120 !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-select:focus {
  background-color: #0b1120 !important;
  color: #f1f5f9 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important;
}
html[data-bs-theme="dark"] .input-group-text,
html[data-theme="dark"] .input-group-text {
  background-color: #19253b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

/* Nav tabs / pills in dark mode */
html[data-bs-theme="dark"] .nav-pills .nav-link,
html[data-theme="dark"] .nav-pills .nav-link {
  color: #94a3b8;
}
html[data-bs-theme="dark"] .nav-pills .nav-link:hover,
html[data-theme="dark"] .nav-pills .nav-link:hover {
  color: #f1f5f9;
  background-color: #1e293b;
}
html[data-bs-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: #10625c !important;
  color: #ffffff !important;
}

/* Pagination in Dark Mode */
html[data-bs-theme="dark"] div.pagination a,
html[data-theme="dark"] div.pagination a,
html[data-bs-theme="dark"] div.pagination span.disabled,
html[data-theme="dark"] div.pagination span.disabled {
  background-color: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
  color: #2dd4bf !important;
}
html[data-bs-theme="dark"] div.pagination a:hover,
html[data-theme="dark"] div.pagination a:hover {
  background-color: #19253b !important;
  color: #34d399 !important;
  border-color: #10b981 !important;
}
html[data-bs-theme="dark"] div.pagination span.current,
html[data-theme="dark"] div.pagination span.current {
  background-color: #10625c !important;
  border-color: #10625c !important;
  color: #ffffff !important;
}

/* Footer in Dark Mode */
html[data-bs-theme="dark"] .bb-footer,
html[data-theme="dark"] .bb-footer {
  background-color: #070c18 !important;
  border-top-color: #1e293b !important;
  color: #94a3b8 !important;
}
html[data-bs-theme="dark"] .bb-footer a,
html[data-theme="dark"] .bb-footer a {
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .bb-footer a:hover,
html[data-theme="dark"] .bb-footer a:hover {
  color: #34d399 !important;
}

/* Badges in Dark Mode */
html[data-bs-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.bg-light {
  background-color: #19253b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* Reading container & typography in Dark Mode */
html[data-bs-theme="dark"] .cont-body,
html[data-theme="dark"] .cont-body,
html[data-bs-theme="dark"] .cont-intro,
html[data-theme="dark"] .cont-intro,
html[data-bs-theme="dark"] .cont-text,
html[data-theme="dark"] .cont-text {
  color: #e2e8f0 !important;
}

/* Theme Toggle Button Styling */
.bb-theme-toggle-btn {
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #475569 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
  user-select: none;
  font-size: 12.5px !important;
  padding: 4px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.bb-theme-toggle-btn:hover {
  color: #0f172a !important;
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}
html[data-bs-theme="dark"] .bb-theme-toggle-btn,
html[data-theme="dark"] .bb-theme-toggle-btn {
  border-color: #334155 !important;
  color: #fbbf24 !important;
  background: #19253b !important;
}
html[data-bs-theme="dark"] .bb-theme-toggle-btn:hover,
html[data-theme="dark"] .bb-theme-toggle-btn:hover {
  background: #243248 !important;
  color: #fde047 !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.3) !important;
}
.bb-theme-toggle-btn .theme-icon {
  font-size: 14px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.bb-theme-toggle-btn:hover .theme-icon {
  transform: rotate(20deg);
}

/* Modals & Dialogs in Dark Mode */
html[data-bs-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-content {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text-main) !important;
  border-color: var(--bb-border) !important;
}
html[data-bs-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-footer {
  border-color: var(--bb-border) !important;
}

/* Select2 in Dark Mode */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: #0b1120 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-dropdown {
  background-color: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #0d9488 !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #0b1120 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* Legacy markup fallback in Dark Mode */
html[data-bs-theme="dark"] td[bgcolor],
html[data-theme="dark"] td[bgcolor],
html[data-bs-theme="dark"] table[bgcolor],
html[data-theme="dark"] table[bgcolor] {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text-main) !important;
}

html[data-bs-theme="dark"] table[bgcolor="035D8A"],
html[data-bs-theme="dark"] table[bgcolor="#035D8A"],
html[data-theme="dark"] table[bgcolor="035D8A"],
html[data-theme="dark"] table[bgcolor="#035D8A"],
body.dark-mode table[bgcolor="035D8A"],
body.dark-mode table[bgcolor="#035D8A"] {
  background-color: #223049 !important;
  border-color: #223049 !important;
}

html[data-bs-theme="dark"] table[bgcolor="FFFFFF"],
html[data-bs-theme="dark"] table[bgcolor="#FFFFFF"],
html[data-theme="dark"] table[bgcolor="FFFFFF"],
html[data-theme="dark"] table[bgcolor="#FFFFFF"],
body.dark-mode table[bgcolor="FFFFFF"],
body.dark-mode table[bgcolor="#FFFFFF"],
html[data-bs-theme="dark"] table[bgcolor="FFFFFF"] td,
html[data-theme="dark"] table[bgcolor="FFFFFF"] td,
body.dark-mode table[bgcolor="FFFFFF"] td {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text-main) !important;
}

html[data-bs-theme="dark"] font[color="#333333"],
html[data-bs-theme="dark"] font[color="#000000"],
html[data-theme="dark"] font[color="#333333"],
html[data-theme="dark"] font[color="#000000"] {
  color: #e2e8f0 !important;
}
html[data-bs-theme="dark"] font[color="#555555"],
html[data-bs-theme="dark"] font[color="#666666"],
html[data-theme="dark"] font[color="#555555"],
html[data-theme="dark"] font[color="#666666"] {
  color: #94a3b8 !important;
}

/* p_home.php & p_content.php Article Titles in Dark Mode */
html[data-bs-theme="dark"] .bb-center-content font[size="3"] b a,
html[data-theme="dark"] .bb-center-content font[size="3"] b a,
body.dark-mode .bb-center-content font[size="3"] b a,
html[data-bs-theme="dark"] .bb-center-content a[href*="sel=content&f=one"],
html[data-theme="dark"] .bb-center-content a[href*="sel=content&f=one"],
body.dark-mode .bb-center-content a[href*="sel=content&f=one"],
html[data-bs-theme="dark"] .bb-center-content a[href*="obj_id="],
html[data-theme="dark"] .bb-center-content a[href*="obj_id="],
body.dark-mode .bb-center-content a[href*="obj_id="] {
  color: #f8fafc !important;
}
html[data-bs-theme="dark"] .bb-center-content font[size="3"] b a:hover,
html[data-theme="dark"] .bb-center-content font[size="3"] b a:hover,
body.dark-mode .bb-center-content font[size="3"] b a:hover,
html[data-bs-theme="dark"] .bb-center-content a[href*="sel=content&f=one"]:hover,
html[data-theme="dark"] .bb-center-content a[href*="sel=content&f=one"]:hover,
body.dark-mode .bb-center-content a[href*="sel=content&f=one"]:hover,
html[data-bs-theme="dark"] .bb-center-content a[href*="obj_id="]:hover,
html[data-theme="dark"] .bb-center-content a[href*="obj_id="]:hover,
body.dark-mode .bb-center-content a[href*="obj_id="]:hover {
  color: #34d399 !important;
}

/* p_home.php Meta info (Оруулсан admin 2007-11-13 ... уншсан) */
html[data-bs-theme="dark"] font[color="035D8A"],
html[data-bs-theme="dark"] font[color="#035D8A"],
html[data-theme="dark"] font[color="035D8A"],
html[data-theme="dark"] font[color="#035D8A"],
body.dark-mode font[color="035D8A"],
body.dark-mode font[color="#035D8A"],
html[data-bs-theme="dark"] font[size="1"],
html[data-theme="dark"] font[size="1"],
body.dark-mode font[size="1"] {
  color: #94a3b8 !important;
}

html[data-bs-theme="dark"] font[color="035D8A"] a,
html[data-bs-theme="dark"] font[color="#035D8A"] a,
html[data-theme="dark"] font[color="035D8A"] a,
html[data-theme="dark"] font[color="#035D8A"] a,
body.dark-mode font[color="035D8A"] a,
body.dark-mode font[color="#035D8A"] a,
html[data-bs-theme="dark"] font[size="1"] a,
html[data-theme="dark"] font[size="1"] a,
body.dark-mode font[size="1"] a {
  color: #2dd4bf !important;
  font-weight: 600;
  text-decoration: none;
}

html[data-bs-theme="dark"] font[color="035D8A"] a:hover,
html[data-bs-theme="dark"] font[color="#035D8A"] a:hover,
html[data-theme="dark"] font[color="035D8A"] a:hover,
html[data-theme="dark"] font[color="#035D8A"] a:hover,
body.dark-mode font[color="035D8A"] a:hover,
body.dark-mode font[color="#035D8A"] a:hover,
html[data-bs-theme="dark"] font[size="1"] a:hover,
html[data-theme="dark"] font[size="1"] a:hover,
body.dark-mode font[size="1"] a:hover {
  color: #34d399 !important;
  text-decoration: underline;
}

/* p_home.php Footer Links inside parentheses */
html[data-bs-theme="dark"] .bb-center-content font[size="3"],
html[data-theme="dark"] .bb-center-content font[size="3"],
body.dark-mode .bb-center-content font[size="3"] {
  color: #94a3b8 !important;
}
html[data-bs-theme="dark"] .bb-center-content font[size="3"] a,
html[data-theme="dark"] .bb-center-content font[size="3"] a,
body.dark-mode .bb-center-content font[size="3"] a {
  color: #2dd4bf !important;
}
html[data-bs-theme="dark"] .bb-center-content font[size="3"] a:hover,
html[data-theme="dark"] .bb-center-content font[size="3"] a:hover,
body.dark-mode .bb-center-content font[size="3"] a:hover {
  color: #34d399 !important;
}

/* Author Avatar in Dark Mode */
html[data-bs-theme="dark"] .bb-center-content img[src*="topic/"],
html[data-bs-theme="dark"] .bb-center-content img[src*="no_profile"],
html[data-theme="dark"] .bb-center-content img[src*="topic/"],
html[data-theme="dark"] .bb-center-content img[src*="no_profile"],
body.dark-mode .bb-center-content img[src*="topic/"],
body.dark-mode .bb-center-content img[src*="no_profile"] {
  border-color: #334155 !important;
  background-color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Specific Action Links in Dark Mode (Засах, Мэдээлэл оруулах гэх мэт) */
html[data-bs-theme="dark"] a[href*="myedit"],
html[data-theme="dark"] a[href*="myedit"],
body.dark-mode a[href*="myedit"],
html[data-bs-theme="dark"] a[href*="&f=new"],
html[data-theme="dark"] a[href*="&f=new"],
body.dark-mode a[href*="&f=new"] {
  color: #2dd4bf !important;
  text-decoration: none;
}
html[data-bs-theme="dark"] a[href*="myedit"]:hover,
html[data-theme="dark"] a[href*="myedit"]:hover,
body.dark-mode a[href*="myedit"]:hover,
html[data-bs-theme="dark"] a[href*="&f=new"]:hover,
html[data-theme="dark"] a[href*="&f=new"]:hover,
body.dark-mode a[href*="&f=new"]:hover {
  color: #34d399 !important;
  text-decoration: underline;
}

/* Survey & Poll Dark Mode Overrides */
html[data-bs-theme="dark"] .bb-poll-card,
html[data-theme="dark"] .bb-poll-card,
body.dark-mode .bb-poll-card {
  background-color: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
  color: var(--bb-text-main) !important;
}

html[data-bs-theme="dark"] .bb-poll-header,
html[data-theme="dark"] .bb-poll-header,
body.dark-mode .bb-poll-header {
  border-bottom-color: var(--bb-border) !important;
}

html[data-bs-theme="dark"] .bb-poll-title,
html[data-theme="dark"] .bb-poll-title,
body.dark-mode .bb-poll-title {
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .bb-survey-option,
html[data-theme="dark"] .bb-survey-option,
body.dark-mode .bb-survey-option,
html[data-bs-theme="dark"] .bb-poll-option-item,
html[data-theme="dark"] .bb-poll-option-item,
body.dark-mode .bb-poll-option-item {
  background-color: #19253b !important;
  border-color: #223049 !important;
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .bb-poll-option-item span,
html[data-theme="dark"] .bb-poll-option-item span,
body.dark-mode .bb-poll-option-item span,
html[data-bs-theme="dark"] .bb-poll-option-item .text-dark,
html[data-theme="dark"] .bb-poll-option-item .text-dark,
body.dark-mode .bb-poll-option-item .text-dark {
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .bb-survey-option:hover,
html[data-theme="dark"] .bb-survey-option:hover,
body.dark-mode .bb-survey-option:hover,
html[data-bs-theme="dark"] .bb-poll-option-item:hover,
html[data-theme="dark"] .bb-poll-option-item:hover,
body.dark-mode .bb-poll-option-item:hover {
  background-color: #1e2c45 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .bb-survey-option:has(input:checked),
html[data-theme="dark"] .bb-survey-option:has(input:checked),
body.dark-mode .bb-survey-option:has(input:checked),
html[data-bs-theme="dark"] .bb-poll-option-item.selected,
html[data-theme="dark"] .bb-poll-option-item.selected,
html[data-bs-theme="dark"] .bb-poll-option-item:has(input:checked),
html[data-theme="dark"] .bb-poll-option-item:has(input:checked),
body.dark-mode .bb-poll-option-item.selected,
body.dark-mode .bb-poll-option-item:has(input:checked) {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px #10b981 !important;
}

html[data-bs-theme="dark"] .bb-poll-option-item.selected span,
html[data-theme="dark"] .bb-poll-option-item:has(input:checked) span,
body.dark-mode .bb-poll-option-item.selected span,
body.dark-mode .bb-poll-option-item:has(input:checked) span,
html[data-bs-theme="dark"] .bb-poll-option-item.selected .text-dark,
html[data-theme="dark"] .bb-poll-option-item:has(input:checked) .text-dark,
body.dark-mode .bb-poll-option-item.selected .text-dark,
body.dark-mode .bb-poll-option-item:has(input:checked) .text-dark {
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .bb-survey-option input[type="radio"],
html[data-theme="dark"] .bb-survey-option input[type="radio"],
body.dark-mode .bb-survey-option input[type="radio"],
html[data-bs-theme="dark"] .form-check-input,
html[data-theme="dark"] .form-check-input {
  background-color: #0b1120 !important;
  border-color: #475569 !important;
}

html[data-bs-theme="dark"] .form-check-input:checked,
html[data-theme="dark"] .form-check-input:checked {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

html[data-bs-theme="dark"] .bb-poll-progress-track,
html[data-theme="dark"] .bb-poll-progress-track,
body.dark-mode .bb-poll-progress-track {
  background-color: #0b1120 !important;
}

/* Recent polls archive list */
html[data-bs-theme="dark"] .bb-poll-list-item,
html[data-theme="dark"] .bb-poll-list-item,
body.dark-mode .bb-poll-list-item {
  background-color: #151f32 !important;
  border-color: #223049 !important;
}

html[data-bs-theme="dark"] .bb-poll-list-item:hover,
html[data-theme="dark"] .bb-poll-list-item:hover,
body.dark-mode .bb-poll-list-item:hover {
  background-color: #19253b !important;
}

html[data-bs-theme="dark"] .bb-poll-list-item a,
html[data-theme="dark"] .bb-poll-list-item a,
body.dark-mode .bb-poll-list-item a {
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .bb-poll-list-item a:hover,
html[data-theme="dark"] .bb-poll-list-item a:hover,
body.dark-mode .bb-poll-list-item a:hover {
  color: #34d399 !important;
}

/* Buttons in Dark Mode */
html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-secondary,
body.dark-mode .btn-outline-secondary {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:hover {
  background-color: #1e293b !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
}

html[data-bs-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-primary,
body.dark-mode .btn-outline-primary {
  border-color: #14b8a6 !important;
  color: #2dd4bf !important;
}

html[data-bs-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:hover {
  background-color: #10625c !important;
  border-color: #10625c !important;
  color: #ffffff !important;
}

/* Online Stats Widget Styling */
.bb-online-stats {
  color: #64748b;
  font-size: 0.8125rem;
  line-height: 1.5;
  border-top-color: var(--bb-border, #e2e8f0) !important;
}
.bb-online-stats strong {
  color: var(--bb-text-main, #1e293b);
  font-weight: 600;
}
.bb-online-stats a {
  color: var(--bb-primary, #10625C);
  text-decoration: none;
  font-weight: 600;
}
.bb-online-stats a:hover {
  color: var(--bb-primary-hover, #147a72);
  text-decoration: underline;
}

/* Online Stats in Dark Mode */
html[data-bs-theme="dark"] .bb-online-stats,
html[data-theme="dark"] .bb-online-stats,
body.dark-mode .bb-online-stats {
  color: #94a3b8 !important;
  border-top-color: #223049 !important;
}
html[data-bs-theme="dark"] .bb-online-stats strong,
html[data-theme="dark"] .bb-online-stats strong,
body.dark-mode .bb-online-stats strong {
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .bb-online-stats a,
html[data-theme="dark"] .bb-online-stats a,
body.dark-mode .bb-online-stats a {
  color: #2dd4bf !important;
  font-weight: 600;
}
html[data-bs-theme="dark"] .bb-online-stats a:hover,
html[data-theme="dark"] .bb-online-stats a:hover,
body.dark-mode .bb-online-stats a:hover {
  color: #34d399 !important;
  text-decoration: underline;
}

/* Overriding legacy bataka.css .content, .title, and links in Dark Mode */
html[data-bs-theme="dark"] .content,
html[data-theme="dark"] .content,
body.dark-mode .content,
html[data-bs-theme="dark"] font.content,
html[data-theme="dark"] font.content,
body.dark-mode font.content,
html[data-bs-theme="dark"] td.content,
html[data-theme="dark"] td.content,
body.dark-mode td.content {
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .title,
html[data-theme="dark"] .title,
body.dark-mode .title {
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .storytitle,
html[data-theme="dark"] .storytitle,
body.dark-mode .storytitle {
  color: #f1f5f9 !important;
}

/* ==========================================================================
   Font Size Scaling System (Reading Accessibility Tool)
   ========================================================================== */
:root {
  --bb-font-scale: 1;
}
html[data-font-size="small"] {
  --bb-font-scale: 0.9;
}
html[data-font-size="normal"] {
  --bb-font-scale: 1;
}
html[data-font-size="large"] {
  --bb-font-scale: 1.15;
}
html[data-font-size="xlarge"] {
  --bb-font-scale: 1.3;
}
html[data-font-size="xxlarge"] {
  --bb-font-scale: 1.45;
}

/* Dynamically Scale Reading Areas */
.bb-center-content,
.cont-body,
.cont-intro,
.cont-text,
.bb-reading-area,
.content,
td.content,
font.content,
.bb-center-content p,
.bb-center-content td font {
  font-size: calc(14.5px * var(--bb-font-scale, 1)) !important;
  line-height: calc(1.7 * var(--bb-font-scale, 1)) !important;
  transition: font-size 0.15s ease, line-height 0.15s ease;
}

/* Font Resizer Widget Styling */
.bb-font-resizer-widget {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--bb-border, #e2e8f0);
  transition: all 0.2s ease;
  user-select: none;
  flex-shrink: 0 !important;
}
.bb-font-resizer-widget .bb-font-btn {
  color: var(--bb-text-main, #334155);
  padding: 3px 6px;
  line-height: 1;
  transition: all 0.15s ease;
}
.bb-font-resizer-widget .bb-font-btn:hover {
  color: var(--bb-primary, #10625C);
  transform: scale(1.15);
}
.bb-font-resizer-widget .font-size-display {
  transition: all 0.2s ease;
  min-width: 38px;
  text-align: center;
}

html[data-bs-theme="dark"] .bb-font-resizer-widget {
  background: #19253b !important;
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .bb-font-resizer-widget .bb-font-btn {
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .bb-font-resizer-widget .bb-font-btn:hover {
  color: #34d399 !important;
}
html[data-bs-theme="dark"] .bb-font-resizer-widget .font-size-display {
  background: #0f172a !important;
  color: #2dd4bf !important;
}

/* ==========================================================================
   Article Share Tools Styling (box_sharetools.php)
   ========================================================================== */
.bb-share-tools a.btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  background-color: transparent !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
.bb-share-tools a.btn i {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Light Mode Buttons */
.bb-share-tools .btn-share-fb {
  border: 1.5px solid #1877f2 !important;
  color: #1877f2 !important;
}
.bb-share-tools .btn-share-fb:hover {
  background-color: #1877f2 !important;
  color: #ffffff !important;
}

.bb-share-tools .btn-share-tw {
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
}
.bb-share-tools .btn-share-tw:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

.bb-share-tools .btn-share-in {
  border: 1.5px solid #0a66c2 !important;
  color: #0a66c2 !important;
}
.bb-share-tools .btn-share-in:hover {
  background-color: #0a66c2 !important;
  color: #ffffff !important;
}

.bb-share-tools .btn-share-wa {
  border: 1.5px solid #16a34a !important;
  color: #16a34a !important;
}
.bb-share-tools .btn-share-wa:hover {
  background-color: #16a34a !important;
  color: #ffffff !important;
}

.bb-share-tools .btn-share-email {
  border: 1.5px solid #64748b !important;
  color: #334155 !important;
}
.bb-share-tools .btn-share-email:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
}

.bb-share-tools .btn-share-fav {
  border: 1.5px solid #e11d48 !important;
  color: #e11d48 !important;
}
.bb-share-tools .btn-share-fav:hover,
.bb-share-tools .btn-share-fav.btn-danger {
  background-color: #e11d48 !important;
  color: #ffffff !important;
}

.bb-share-tools .btn-share-print {
  border: 1.5px solid #64748b !important;
  color: #475569 !important;
}
.bb-share-tools .btn-share-print:hover {
  background-color: #64748b !important;
  color: #ffffff !important;
}

.bb-share-tools .btn-share-fb-like {
  border: 1.5px solid #1877f2 !important;
  color: #1877f2 !important;
}
.bb-share-tools .btn-share-fb-like:hover {
  background-color: #1877f2 !important;
  color: #ffffff !important;
}

/* Dark Mode Share Tools Overrides - Crisp, Bright & High Contrast */
html[data-bs-theme="dark"] .bb-share-tools .btn-share-fb,
html[data-theme="dark"] .bb-share-tools .btn-share-fb,
body.dark-mode .bb-share-tools .btn-share-fb,
html[data-bs-theme="dark"] .bb-share-tools .btn-share-fb-like,
html[data-theme="dark"] .bb-share-tools .btn-share-fb-like,
body.dark-mode .bb-share-tools .btn-share-fb-like {
  border: 1.5px solid #3b82f6 !important;
  color: #93c5fd !important;
  background-color: rgba(59, 130, 246, 0.12) !important;
}
html[data-bs-theme="dark"] .bb-share-tools .btn-share-fb:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-fb:hover,
body.dark-mode .bb-share-tools .btn-share-fb:hover,
html[data-bs-theme="dark"] .bb-share-tools .btn-share-fb-like:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-fb-like:hover,
body.dark-mode .bb-share-tools .btn-share-fb-like:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

html[data-bs-theme="dark"] .bb-share-tools .btn-share-tw,
html[data-theme="dark"] .bb-share-tools .btn-share-tw,
body.dark-mode .bb-share-tools .btn-share-tw {
  border: 1.5px solid #38bdf8 !important;
  color: #7dd3fc !important;
  background-color: rgba(56, 189, 248, 0.12) !important;
}
html[data-bs-theme="dark"] .bb-share-tools .btn-share-tw:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-tw:hover,
body.dark-mode .bb-share-tools .btn-share-tw:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

html[data-bs-theme="dark"] .bb-share-tools .btn-share-in,
html[data-theme="dark"] .bb-share-tools .btn-share-in,
body.dark-mode .bb-share-tools .btn-share-in {
  border: 1.5px solid #60a5fa !important;
  color: #bfdbfe !important;
  background-color: rgba(96, 165, 250, 0.12) !important;
}
html[data-bs-theme="dark"] .bb-share-tools .btn-share-in:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-in:hover,
body.dark-mode .bb-share-tools .btn-share-in:hover {
  background-color: #0a66c2 !important;
  color: #ffffff !important;
  border-color: #0a66c2 !important;
}

html[data-bs-theme="dark"] .bb-share-tools .btn-share-wa,
html[data-theme="dark"] .bb-share-tools .btn-share-wa,
body.dark-mode .bb-share-tools .btn-share-wa {
  border: 1.5px solid #10b981 !important;
  color: #6ee7b7 !important;
  background-color: rgba(16, 185, 129, 0.12) !important;
}
html[data-bs-theme="dark"] .bb-share-tools .btn-share-wa:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-wa:hover,
body.dark-mode .bb-share-tools .btn-share-wa:hover {
  background-color: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

html[data-bs-theme="dark"] .bb-share-tools .btn-share-email,
html[data-theme="dark"] .bb-share-tools .btn-share-email,
body.dark-mode .bb-share-tools .btn-share-email {
  border: 1.5px solid #94a3b8 !important;
  color: #f8fafc !important;
  background-color: rgba(148, 163, 184, 0.15) !important;
}
html[data-bs-theme="dark"] .bb-share-tools .btn-share-email:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-email:hover,
body.dark-mode .bb-share-tools .btn-share-email:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
  border-color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .bb-share-tools .btn-share-fav,
html[data-theme="dark"] .bb-share-tools .btn-share-fav,
body.dark-mode .bb-share-tools .btn-share-fav {
  border: 1.5px solid #f43f5e !important;
  color: #fda4af !important;
  background-color: rgba(244, 63, 94, 0.12) !important;
}
html[data-bs-theme="dark"] .bb-share-tools .btn-share-fav:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-fav:hover,
body.dark-mode .bb-share-tools .btn-share-fav:hover,
html[data-bs-theme="dark"] .bb-share-tools .btn-share-fav.btn-danger,
html[data-theme="dark"] .bb-share-tools .btn-share-fav.btn-danger,
body.dark-mode .bb-share-tools .btn-share-fav.btn-danger {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
}

html[data-bs-theme="dark"] .bb-share-tools .btn-share-print,
html[data-theme="dark"] .bb-share-tools .btn-share-print,
body.dark-mode .bb-share-tools .btn-share-print {
  border: 1.5px solid #94a3b8 !important;
  color: #f8fafc !important;
  background-color: rgba(148, 163, 184, 0.15) !important;
}
html[data-bs-theme="dark"] .bb-share-tools .btn-share-print:hover,
html[data-theme="dark"] .bb-share-tools .btn-share-print:hover,
body.dark-mode .bb-share-tools .btn-share-print:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
  border-color: #f1f5f9 !important;
}

/* ==========================================================================
   User Registration (index.php?sel=user&f=new) & Member Cards in Dark Mode
   ========================================================================== */
html[data-bs-theme="dark"] .bb-member-card,
html[data-theme="dark"] .bb-member-card,
body.dark-mode .bb-member-card {
  background-color: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

html[data-bs-theme="dark"] .bb-member-card .card-body,
html[data-theme="dark"] .bb-member-card .card-body,
body.dark-mode .bb-member-card .card-body {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text-main) !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card,
html[data-theme="dark"] .bb-reg-form-card,
body.dark-mode .bb-reg-form-card {
  background-color: transparent !important;
  color: var(--bb-text-main) !important;
}

html[data-bs-theme="dark"] .bb-reg-icon-wrapper,
html[data-theme="dark"] .bb-reg-icon-wrapper,
body.dark-mode .bb-reg-icon-wrapper {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

html[data-bs-theme="dark"] .bb-reg-title,
html[data-theme="dark"] .bb-reg-title,
body.dark-mode .bb-reg-title {
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .bb-reg-subtitle,
html[data-theme="dark"] .bb-reg-subtitle,
body.dark-mode .bb-reg-subtitle {
  color: #94a3b8 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-label,
html[data-theme="dark"] .bb-reg-form-card .form-label,
body.dark-mode .bb-reg-form-card .form-label {
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-label .text-secondary,
html[data-theme="dark"] .bb-reg-form-card .form-label .text-secondary,
body.dark-mode .bb-reg-form-card .form-label .text-secondary {
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-label .text-muted,
html[data-theme="dark"] .bb-reg-form-card .form-label .text-muted,
body.dark-mode .bb-reg-form-card .form-label .text-muted {
  color: #94a3b8 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-control,
html[data-theme="dark"] .bb-reg-form-card .form-control,
body.dark-mode .bb-reg-form-card .form-control,
html[data-bs-theme="dark"] .bb-reg-form-card .form-select,
html[data-theme="dark"] .bb-reg-form-card .form-select,
body.dark-mode .bb-reg-form-card .form-select {
  background-color: #0b1120 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-control::placeholder,
html[data-theme="dark"] .bb-reg-form-card .form-control::placeholder,
body.dark-mode .bb-reg-form-card .form-control::placeholder {
  color: #64748b !important;
  opacity: 0.9;
}

html[data-bs-theme="dark"] .bb-reg-form-card input:-webkit-autofill,
html[data-bs-theme="dark"] .bb-reg-form-card input:-webkit-autofill:hover, 
html[data-bs-theme="dark"] .bb-reg-form-card input:-webkit-autofill:focus,
body.dark-mode .bb-reg-form-card input:-webkit-autofill,
body.dark-mode .bb-reg-form-card input:-webkit-autofill:hover,
body.dark-mode .bb-reg-form-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8fafc !important;
  -webkit-box-shadow: 0 0 0px 1000px #0b1120 inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-control:focus,
html[data-theme="dark"] .bb-reg-form-card .form-control:focus,
body.dark-mode .bb-reg-form-card .form-control:focus,
html[data-bs-theme="dark"] .bb-reg-form-card .form-select:focus,
html[data-theme="dark"] .bb-reg-form-card .form-select:focus,
body.dark-mode .bb-reg-form-card .form-select:focus {
  background-color: #0d1527 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .input-group-text,
html[data-theme="dark"] .bb-reg-form-card .input-group-text,
body.dark-mode .bb-reg-form-card .input-group-text {
  background-color: #19253b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .bb-btn-toggle-pass,
html[data-theme="dark"] .bb-reg-form-card .bb-btn-toggle-pass,
body.dark-mode .bb-reg-form-card .bb-btn-toggle-pass,
html[data-bs-theme="dark"] .bb-reg-form-card .input-group .btn-outline-secondary,
html[data-theme="dark"] .bb-reg-form-card .input-group .btn-outline-secondary,
body.dark-mode .bb-reg-form-card .input-group .btn-outline-secondary {
  background-color: #19253b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .bb-btn-toggle-pass:hover,
html[data-theme="dark"] .bb-reg-form-card .bb-btn-toggle-pass:hover,
body.dark-mode .bb-reg-form-card .bb-btn-toggle-pass:hover,
html[data-bs-theme="dark"] .bb-reg-form-card .input-group .btn-outline-secondary:hover,
html[data-theme="dark"] .bb-reg-form-card .input-group .btn-outline-secondary:hover,
body.dark-mode .bb-reg-form-card .input-group .btn-outline-secondary:hover {
  background-color: #22344f !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-select,
html[data-theme="dark"] .bb-reg-form-card .form-select,
body.dark-mode .bb-reg-form-card .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-select option,
html[data-theme="dark"] .bb-reg-form-card .form-select option,
body.dark-mode .bb-reg-form-card .form-select option {
  background-color: #151f32 !important;
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-check-input,
html[data-theme="dark"] .bb-reg-form-card .form-check-input,
body.dark-mode .bb-reg-form-card .form-check-input {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-check-input:checked,
html[data-theme="dark"] .bb-reg-form-card .form-check-input:checked,
body.dark-mode .bb-reg-form-card .form-check-input:checked {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card .form-check-label,
html[data-theme="dark"] .bb-reg-form-card .form-check-label,
body.dark-mode .bb-reg-form-card .form-check-label {
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card textarea.form-control,
html[data-theme="dark"] .bb-reg-form-card textarea.form-control,
body.dark-mode .bb-reg-form-card textarea.form-control {
  background-color: #0b1120 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card #btn_add,
html[data-theme="dark"] .bb-reg-form-card #btn_add,
body.dark-mode .bb-reg-form-card #btn_add {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card #btn_add:hover,
html[data-theme="dark"] .bb-reg-form-card #btn_add:hover,
body.dark-mode .bb-reg-form-card #btn_add:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

html[data-bs-theme="dark"] .bb-reg-form-card button[name="go_back"],
html[data-theme="dark"] .bb-reg-form-card button[name="go_back"],
body.dark-mode .bb-reg-form-card button[name="go_back"] {
  background-color: #19253b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .bb-reg-form-card button[name="go_back"]:hover,
html[data-theme="dark"] .bb-reg-form-card button[name="go_back"]:hover,
body.dark-mode .bb-reg-form-card button[name="go_back"]:hover {
  background-color: #22344f !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .bb-reg-footer,
html[data-theme="dark"] .bb-reg-footer,
body.dark-mode .bb-reg-footer {
  border-color: #223049 !important;
  color: #94a3b8 !important;
}

html[data-bs-theme="dark"] .bb-reg-footer a,
html[data-theme="dark"] .bb-reg-footer a,
body.dark-mode .bb-reg-footer a {
  color: #34d399 !important;
}

html[data-bs-theme="dark"] .bb-reg-footer a:hover,
html[data-theme="dark"] .bb-reg-footer a:hover,
body.dark-mode .bb-reg-footer a:hover {
  color: #6ee7b7 !important;
  text-decoration: underline !important;
}

/* Success & Danger Alerts in Dark Mode */
html[data-bs-theme="dark"] .bb-reg-alert-success,
html[data-theme="dark"] .bb-reg-alert-success,
body.dark-mode .bb-reg-alert-success {
  background: rgba(16, 185, 129, 0.12) !important;
  border-left: 5px solid #10b981 !important;
  color: #a7f3d0 !important;
}

html[data-bs-theme="dark"] .bb-reg-alert-success .bb-alert-notice,
html[data-theme="dark"] .bb-reg-alert-success .bb-alert-notice,
body.dark-mode .bb-reg-alert-success .bb-alert-notice {
  background: #111a2e !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .bb-reg-alert-success .bb-alert-text,
html[data-theme="dark"] .bb-reg-alert-success .bb-alert-text,
body.dark-mode .bb-reg-alert-success .bb-alert-text {
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .bb-reg-alert-danger,
html[data-theme="dark"] .bb-reg-alert-danger,
body.dark-mode .bb-reg-alert-danger {
  background: rgba(244, 63, 94, 0.15) !important;
  border-left: 4px solid #f43f5e !important;
}

html[data-bs-theme="dark"] .bb-reg-alert-danger .text-danger,
html[data-theme="dark"] .bb-reg-alert-danger .text-danger,
body.dark-mode .bb-reg-alert-danger .text-danger {
  color: #fca5a5 !important;
}

/* Real-time live password rules box */
.bb-live-rules-box {
  transition: all 0.25s ease;
}

.bb-reg-form-card .form-control.is-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.bb-reg-form-card .form-control.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

html[data-bs-theme="dark"] .bb-live-rules-box,
html[data-theme="dark"] .bb-live-rules-box,
body.dark-mode .bb-live-rules-box {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .bb-live-rules-box .text-secondary,
html[data-theme="dark"] .bb-live-rules-box .text-secondary,
body.dark-mode .bb-live-rules-box .text-secondary {
  color: #94a3b8 !important;
}

/* ========================================================
   Summernote Rich Text Editor Dark Mode Compatibility
   ======================================================== */
html[data-bs-theme="dark"] .note-editor.note-frame,
html[data-theme="dark"] .note-editor.note-frame,
body.dark-mode .note-editor.note-frame {
  border: 1px solid #334155 !important;
  background-color: #0f172a !important;
  border-radius: 12px !important;
  overflow: hidden;
}

html[data-bs-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable,
html[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable,
body.dark-mode .note-editor.note-frame .note-editing-area .note-editable {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .note-toolbar,
html[data-theme="dark"] .note-toolbar,
body.dark-mode .note-toolbar {
  background-color: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
}

html[data-bs-theme="dark"] .note-editor .note-toolbar .note-btn,
html[data-theme="dark"] .note-editor .note-toolbar .note-btn,
body.dark-mode .note-editor .note-toolbar .note-btn {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .note-editor .note-toolbar .note-btn:hover,
html[data-theme="dark"] .note-editor .note-toolbar .note-btn:hover,
body.dark-mode .note-editor .note-toolbar .note-btn:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
}

html[data-bs-theme="dark"] .note-statusbar,
html[data-theme="dark"] .note-statusbar,
body.dark-mode .note-statusbar {
  background-color: #1e293b !important;
  border-top: 1px solid #334155 !important;
}

html[data-bs-theme="dark"] .note-dropdown-menu,
html[data-theme="dark"] .note-dropdown-menu,
body.dark-mode .note-dropdown-menu {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

html[data-bs-theme="dark"] .note-dropdown-menu a.note-dropdown-item,
html[data-theme="dark"] .note-dropdown-menu a.note-dropdown-item,
body.dark-mode .note-dropdown-menu a.note-dropdown-item {
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .note-dropdown-menu a.note-dropdown-item:hover,
html[data-theme="dark"] .note-dropdown-menu a.note-dropdown-item:hover,
body.dark-mode .note-dropdown-menu a.note-dropdown-item:hover {
  background-color: #334155 !important;
  color: #38bdf8 !important;
}

html[data-bs-theme="dark"] .note-modal-content,
html[data-theme="dark"] .note-modal-content,
body.dark-mode .note-modal-content {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .note-modal-header,
html[data-bs-theme="dark"] .note-modal-footer,
html[data-theme="dark"] .note-modal-header,
html[data-theme="dark"] .note-modal-footer,
body.dark-mode .note-modal-header,
body.dark-mode .note-modal-footer {
  border-color: #334155 !important;
}

/* ==========================================================================
   Photo Gallery System (p_gallery.php)
   ========================================================================== */
.bb-gallery-header-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.bb-gallery-emblem {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, rgb(16, 98, 92) 0%, rgb(20, 122, 114) 100%);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(16, 98, 92, 0.25);
}
.bb-gallery-nav-pills {
  display: flex;
  gap: 6px;
}
.bb-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  background: #f1f5f9;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}
.bb-cat-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-1px);
}
.bb-cat-pill.active {
  background: linear-gradient(135deg, rgb(16, 98, 92) 0%, rgb(20, 122, 114) 100%) !important;
  color: #ffffff !important;
  border-color: rgb(16, 98, 92);
  box-shadow: 0 2px 6px rgba(16, 98, 92, 0.35);
}

/* Category Banner */
.bb-gallery-cat-banner {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

/* Album Card */
.bb-album-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff;
}
.bb-album-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}
.bb-album-cover {
  height: 220px;
  background-color: #0f172a;
  position: relative;
  overflow: hidden;
}
.bb-album-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.5) 100%);
  pointer-events: none;
}
.bb-album-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-album-card:hover .bb-album-img {
  transform: scale(1.08);
}
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Photo Card */
.bb-photo-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff;
}
.bb-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.09) !important;
  border-color: #cbd5e1 !important;
}
.bb-photo-thumb-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
}
.bb-photo-thumb-wrapper > a.glightbox {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.bb-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-photo-card:hover .bb-photo-img {
  transform: scale(1.06);
}
.bb-photo-overlay {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.bb-photo-card:hover .bb-photo-overlay {
  opacity: 1;
}
.bb-photo-detail-btn {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  transform: translateY(4px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bb-photo-card:hover .bb-photo-detail-btn {
  opacity: 1;
  transform: translateY(0);
}
.bb-photo-detail-btn:hover {
  background-color: rgb(16, 98, 92) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.02);
}

/* Dark Mode Overrides */
html[data-bs-theme="dark"] .bb-gallery-header-card,
html[data-bs-theme="dark"] .bb-gallery-cat-banner,
html[data-bs-theme="dark"] .bb-album-card,
html[data-bs-theme="dark"] .bb-photo-card,
html[data-theme="dark"] .bb-gallery-header-card,
html[data-theme="dark"] .bb-gallery-cat-banner,
html[data-theme="dark"] .bb-album-card,
html[data-theme="dark"] .bb-photo-card,
body.dark-mode .bb-gallery-header-card,
body.dark-mode .bb-gallery-cat-banner,
body.dark-mode .bb-album-card,
body.dark-mode .bb-photo-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html[data-bs-theme="dark"] .bb-gallery-header-card h4 a,
html[data-bs-theme="dark"] .bb-gallery-header-card h4,
html[data-bs-theme="dark"] .bb-gallery-cat-banner h4,
html[data-bs-theme="dark"] .bb-album-card h6 a,
html[data-bs-theme="dark"] .bb-photo-card h6 a,
html[data-theme="dark"] .bb-gallery-header-card h4 a,
html[data-theme="dark"] .bb-gallery-header-card h4,
html[data-theme="dark"] .bb-gallery-cat-banner h4,
html[data-theme="dark"] .bb-album-card h6 a,
html[data-theme="dark"] .bb-photo-card h6 a,
body.dark-mode .bb-gallery-header-card h4 a,
body.dark-mode .bb-gallery-header-card h4,
body.dark-mode .bb-gallery-cat-banner h4,
body.dark-mode .bb-album-card h6 a,
body.dark-mode .bb-photo-card h6 a {
  color: #f1f5f9 !important;
}

html[data-bs-theme="dark"] .bb-cat-pill,
html[data-theme="dark"] .bb-cat-pill,
body.dark-mode .bb-cat-pill {
  background: #334155;
  color: #cbd5e1;
}

html[data-bs-theme="dark"] .bb-cat-pill:hover,
html[data-theme="dark"] .bb-cat-pill:hover,
body.dark-mode .bb-cat-pill:hover {
  background: #475569;
  color: #ffffff;
}

html[data-bs-theme="dark"] .bb-photo-thumb-wrapper,
html[data-theme="dark"] .bb-photo-thumb-wrapper,
body.dark-mode .bb-photo-thumb-wrapper {
  background: #0f172a;
}

/* Gallery Pagination */
.bb-gallery-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.bb-gallery-pagination .page-item {
  margin: 0 !important;
}
.bb-gallery-pagination .page-link {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #334155 !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: none !important;
}
.bb-gallery-pagination .page-link:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}
.bb-gallery-pagination .page-item.active .page-link {
  background: linear-gradient(135deg, rgb(16, 98, 92) 0%, rgb(20, 122, 114) 100%) !important;
  border-color: rgb(16, 98, 92) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 98, 92, 0.35) !important;
}
.bb-gallery-pagination .page-item.disabled .page-link {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}
.bb-gallery-pagination .page-item.page-ellipsis .page-link {
  background: transparent !important;
  border-color: transparent !important;
  color: #64748b !important;
  min-width: 24px !important;
  padding: 0 4px !important;
}
.bb-gallery-pagination .page-btn-nav {
  border-radius: 20px !important;
  padding: 0 14px !important;
  font-weight: 500 !important;
}

/* Dark mode pagination */
html[data-bs-theme="dark"] .bb-gallery-pagination .page-link,
html[data-theme="dark"] .bb-gallery-pagination .page-link,
body.dark-mode .bb-gallery-pagination .page-link {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] .bb-gallery-pagination .page-link:hover,
html[data-theme="dark"] .bb-gallery-pagination .page-link:hover,
body.dark-mode .bb-gallery-pagination .page-link:hover {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html[data-bs-theme="dark"] .bb-gallery-pagination .page-item.disabled .page-link,
html[data-theme="dark"] .bb-gallery-pagination .page-item.disabled .page-link,
body.dark-mode .bb-gallery-pagination .page-item.disabled .page-link {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #475569 !important;
}

#gallery-photos {
  scroll-margin-top: 95px !important;
}

/* Sidebar Gallery Widget */
.bb-gallery-side-item {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.bb-gallery-side-item:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
html[data-bs-theme="dark"] .bb-gallery-side-item,
html[data-theme="dark"] .bb-gallery-side-item,
body.dark-mode .bb-gallery-side-item {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
html[data-bs-theme="dark"] .bb-gallery-side-item:hover,
html[data-theme="dark"] .bb-gallery-side-item:hover,
body.dark-mode .bb-gallery-side-item:hover {
  border-color: #475569 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}