@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

@font-face {
  font-family: "DankMono-Bold";
  src: url("../fonts/DankMono-Bold.woff2");
  src: url("../fonts/DankMono-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Quicksand-Bold";
  src: url("../fonts/Quicksand-SemiBold.ttf");
  src: url("../fonts/Quicksand-SemiBold.ttf");
}

:root {
  /* Layout variables */
  --bb-header-height: 64px;
  --bb-header-height-tablet: 54px;
  --bb-header-height-mobile: 49px;

  /* Light theme (default) */
  --bb-bg-primary: #fefefe;
  --bb-bg-secondary: #f8f9fa;
  --bb-bg-tertiary: #e9ecef;
  --bb-text-primary: #2c2c2c;
  --bb-text-secondary: #495057;
  --bb-accent: #ff4500;
  --bb-accent-secondary: #788482;
  --bb-gradient-start: #f0f2f5;
  --bb-gradient-end: #e6e9ed;
  --bb-solid-bg: #eeeeef;
  --bb-blur-bg: rgba(240, 242, 245, 0.7);
  --bb-hero-video-placeholder-color: color(display-p3 0.04 0.047 0.056);
  --bb-header-bg: #fdfdfd;
  --bb-footer-bg: rgba(240, 242, 245, 0.7);
  --bb-card-bg: #fdfdfd;
  --bb-border-color: #dee2e6;
  --bb-nav-hover-bg: rgba(255, 255, 255, 0.1);
  --bb-nav-hover-bg-pinned: rgba(44, 44, 44, 0.1);
  --bb-menu-bg: rgba(240, 242, 245, 0.7);
  /* Sidebar hover highlight background */
  --bb-sidebar-hover: rgba(0, 0, 0, 0.06);
  /* Manual inline highlight color (light mode) */
  --bb-highlight-manual: #3a3a3a;
  --bb-blockquote-accent: #e1b12d;
  --bb-bg-blockquote: #f1dca385;

  --bb-progress-blue: #007bff;
  --bb-progress-blue-light: #66b3ff;
  --bb-score-green: #28a745;
  --bb-score-green-light: #67c784;
  --bb-score-orange: #ec8f05;
  --bb-score-orange-light: #f7b347;
  --bb-score-yellow: #ffc107;
  --bb-score-yellow-light: #ffdd66;
  --bb-score-red: #dc3545;
  --bb-score-red-light: #ef6c7a;

  /* Carousel gradient color */
  --bb-carousel-gradient-color: color(display-p3 0.957 0.961 0.969);

  /* Table background color for keyboard shortcuts */
  --bb-table-kbshortcuts-bg: rgb(202, 225, 246);
  --bb-table-kbshortcuts-divider: #ccc;

  /* Markdown table colors */
  --bb-table-header-bg: #f0f2f5;
  --bb-table-border-color: #dee2e6;
  --bb-table-header-text: var(--bb-text-primary);
}

[data-bs-theme="dark"] {
  --bb-bg-primary: rgba(0, 16, 50, 1);
  --bb-bg-secondary: rgb(0, 16, 47);
  --bb-bg-tertiary: rgb(12, 11, 0);
  --bb-text-primary: #fbfbfb;
  --bb-text-secondary: #dddddd;
  --bb-accent: #ff4500;
  --bb-accent-secondary: rgba(154, 194, 226, 0.611);
  --bb-gradient-start: rgb(0, 16, 50);
  --bb-gradient-end: rgb(0, 10, 30);
  --bb-solid-bg: rgb(0, 13, 41);
  --bb-blur-bg: rgba(0, 10, 30, 0.7);

  --bb-header-bg: rgba(0, 16, 50, 1);
  --bb-footer-bg: rgba(0, 9, 27, 1);
  --bb-card-bg: rgba(0, 16, 50, 0.2);
  --bb-border-color: #2a2a3b;
  --bb-nav-hover-bg: rgba(255, 255, 255, 0.15);
  --bb-nav-hover-bg-pinned: rgba(255, 255, 255, 0.15);
  --bb-menu-bg: rgba(0, 10, 30, 0.2);
  /* Slightly lighter hover than surfaces in dark mode */
  --bb-sidebar-hover: rgba(255, 255, 255, 0.08);
  /* Manual inline highlight color (dark mode) */
  --bb-highlight-manual: #dddddd;
  --bb-blockquote-accent: #e1b12d;
  --bb-bg-blockquote: #e1b12d7c;

  /* Carousel gradient color */
  --bb-carousel-gradient-color: color(display-p3 0.008 0.035 0.102);

  /* Table background color for keyboard shortcuts (dark mode) */
  --bb-table-kbshortcuts-bg: color(display-p3 0.114 0.184 0.357 / 0.551);
  --bb-table-kbshortcuts-divider: #3a3a3a;

  /* Markdown table colors (dark mode) */
  --bb-table-header-bg: rgb(0, 8, 24);
  --bb-table-border-color: #2a2a3b;
  --bb-table-header-text: var(--bb-text-primary);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans";
  color: var(--bb-text-primary);
  line-height: 1.6;
}

body {
  padding: 0;
  padding-top: var(--bb-header-height); /* Account for fixed header */
  background: var(--bb-footer-bg);
}

.content-container flex-grow-1 {
  background: var(--bb-solid-bg);
}

.content p a {
  color: var(--bb-accent);
}

.content p a:hover {
  text-decoration: underline;
}

.content a {
  text-decoration: none;
  font-weight: 600;
  color: var(--bb-text-primary);
}

.content a:hover {
  text-decoration: underline;
}

.content h1 {
  color: var(--bb-text-primary);
}

figure figcaption {
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

/* Header Container */
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  height: var(--bb-header-height); /* Constant height */
  background: transparent; /* Fully transparent to show underlying gradient */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: border-bottom 0.3s ease, backdrop-filter 0.3s ease;
}

/* Hide border when centered logo is visible */
.header-container.no-border {
  border-bottom: none;
}

/* Add blur when logo is scrolled (top-leading mode) */
.header-container.blurred {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background-color: var(--bb-blur-bg);
}

[data-bs-theme="dark"] .header-container {
  background: transparent; /* Fully transparent to show underlying gradient */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .header-container.no-border {
  border-bottom: none;
}

/* Header Content - always visible and pinned */
.header-content {
  position: relative;
  z-index: 1002;
  padding: 0.5rem 1rem;
  height: 100%;
  display: flex;
  align-items: center; /* Center vertically */
}

header {
  background-color: var(--bb-header-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

header h1 {
  text-decoration: none;
  border-bottom: none;
}

header a {
  text-decoration: none;
}

header nav a {
  color: #ffffff; /* White when logo is centered (on dark video background) */
  margin-left: 20px;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
  border-radius: 10px;
}

header nav a:hover {
  text-decoration: underline;
  background-color: var(--bb-nav-hover-bg);
}

/* When header is pinned/scrolled, make nav text black (light mode only) */
.header-container.blurred .header-content nav a {
  color: #2c2c2c !important; /* Black when header is pinned on light background */
}

/* Hover effect for pinned header (light mode) */
.header-container.blurred .header-content nav a:hover {
  background-color: var(--bb-nav-hover-bg-pinned) !important;
}

/* In dark mode, keep nav text white even when pinned */
[data-bs-theme="dark"] .header-container.blurred .header-content nav a {
  color: #ffffff !important; /* Keep white in dark mode */
}

/* || Drop down styles */

/* Dropdown menu styling - always blurred with explicit values */
#navOverflowDropdown {
  background-color: var(--bb-menu-bg) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 0px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  position: fixed !important;
  will-change: backdrop-filter !important;
  isolation: isolate !important;
  max-width: 100vw !important;
  transform: none !important;
  z-index: 1050 !important;
  display: none;
  padding: 8px !important;
}

#navOverflowDropdown.show {
  display: block !important;
}

[data-bs-theme="dark"] #navOverflowDropdown {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(40px)) {
  #navOverflowDropdown {
    background-color: rgba(240, 242, 245, 0.9) !important;
  }

  [data-bs-theme="dark"] #navOverflowDropdown {
    background-color: rgba(0, 10, 30, 0.9) !important;
  }
}

/* Dropdown items styling to match header nav */
.dropdown-item {
  color: var(--bb-text-primary) !important;
  padding: 0.75rem 1rem !important;
  transition: background-color 0.3s ease, border-radius 0.3s ease !important;
  border-radius: 8px !important;
}

.dropdown-item:hover {
  background-color: var(--bb-nav-hover-bg-pinned) !important;
  color: var(--bb-text-primary) !important;
  border-radius: 8px !important;
}

/* Ellipsis button styling to match header text state */
#navOverflowMenu {
  color: #ffffff !important; /* Default white when header is not blurred */
  transition: color 0.3s ease, background-color 0.3s ease !important;
  cursor: pointer !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
}

/* Active state for ellipsis button when menu is visible */
#navOverflowMenu.menu-active {
  background-color: var(--bb-nav-hover-bg) !important;
}

/* When header is pinned/scrolled, match the blurred header text color */
.header-container.blurred #navOverflowMenu {
  color: var(
    --bb-text-primary
  ) !important; /* Dark text when header is blurred */
}

/* Active state for ellipsis button when menu is visible and header is blurred */
.header-container.blurred #navOverflowMenu.menu-active {
  background-color: var(--bb-nav-hover-bg-pinned) !important;
}

/* Dark mode ellipsis button - always white */
[data-bs-theme="dark"] #navOverflowMenu {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .header-container.blurred #navOverflowMenu {
  color: #ffffff !important; /* Keep white in dark mode even when blurred */
}

/* Left Logo - hidden when centered logo is visible */
#left-logo {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 0.4rem; /* Add padding to center vertically in header */
}

#left-logo.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Centered Logo Container */
.centered-logo-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0 1rem 0; /* Reduced bottom padding since it's in hero section */
  margin-bottom: 0; /* No margin since it's in hero section */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1; /* Ensure content appears above video */
}

.centered-logo-container.scrolled {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px);
}

.centered-icon-and-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.centered-logo-icon {
  height: 25vh; /* 1/4 of viewport height */
  max-height: 300px;
  min-height: 150px;
  width: auto;
  margin-bottom: 1rem;
  display: block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.content .centered-logo-title {
  font-family: "Quicksand-Bold";
  color: #ffffff !important;
  font-size: clamp(2rem, 8vw, 6rem); /* Responsive font size */
  margin: 0;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop Layout Styles (iPad+ and larger) */
.hero-desktop-layout {
  width: 100%;
  min-height: calc(100vh - 10rem);
  align-items: flex-start !important;
}

.hero-left-vstack {
  flex: 4;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 1rem;
  container: hero-left-vstack / inline-size;
}

.hero-right-vstack {
  flex: 8;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 5rem;
  text-shadow: 0 0 10px rgba(209, 213, 219, 0.5),
    0 0 20px rgba(209, 213, 219, 0.2), 0 0 30px rgba(209, 213, 219, 0.1);
}

.hero-desktop-logo-icon {
  height: 300px;
  width: auto;
  margin-bottom: 3rem;
  display: block;
}

.hero-desktop-logotype {
  font-family: "Quicksand-Bold";
  color: #ffffff !important;
  font-size: 4.5rem;
  margin: 0 0 2.5rem 0;
  text-align: center;
}

@container hero-left-vstack (width < 400px) {
  .hero-desktop-logotype {
    font-size: 4rem;
  }
}

.hero-desktop-description {
  color: #ffffff !important;
  font-size: 2rem;
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}

.hero-desktop-download {
  margin-top: 3rem;
}

p {
  color: var(--bb-text-secondary);
  font-size: 1.15rem;
}

/* Hero description text styling */
.hero-description {
  color: #e3e4e4; /* Darker gray for light mode - more readable */
  text-shadow: 0 0 10px rgba(209, 213, 219, 0.5),
    0 0 20px rgba(209, 213, 219, 0.3), 0 0 30px rgba(209, 213, 219, 0.2);
}

[data-bs-theme="dark"] .hero-description {
  color: #e3e4e4; /* Lighter gray for dark mode - more readable */
  text-shadow: 0 0 10px rgba(209, 213, 219, 0.5),
    0 0 20px rgba(209, 213, 219, 0.3), 0 0 30px rgba(209, 213, 219, 0.2);
}

.content form .btn {
  float: right;
}

.content form .form-label {
  text-align: left;
  display: block;
}

.form-message p {
  color: var(--bb-text-secondary);
  font-size: 1.15rem;
}

.platform-marker {
  display: inline-block;
  font-size: 0.85em;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--bb-accent-secondary);
  padding: 0.25em 0.6em;
  border-radius: 0.5em;
  line-height: 1.2;
}

.highlight {
  color: var(--bb-accent);
  font-weight: bold;
}

/* Manual inline UI highlight */
.highlight-manual {
  color: var(--bb-highlight-manual);
  font-weight: 600;
}

[data-bs-theme="dark"] .highlight-manual {
  text-shadow: 0 0 4px color(display-p3 0.832 0.835 0.835 / 0.156),
    0 0 9px color(display-p3 0.008 0.035 0.102 / 0.102);
}
.hero-section {
  background-color: var(--bb-gradient-start);
  padding-top: 2rem; /* Add space for the centered logo */
  min-height: calc(
    100vh - var(--bb-header-height)
  ); /* Keep content layout static */
  z-index: 1; /* Ensure content appears above video */
}

/* Hero video container that displays a placeholder color while the video loads */
.video-container {
  position: absolute;
  top: calc(
    -1 * var(--bb-header-height)
  ); /* Offset to account for body padding-top */
  left: 0;
  width: 100%;
  height: 100vh; /* Fallback for older browsers */
  height: 100dvh; /* Dynamic viewport height for iOS 26+ - video only */
  object-fit: cover;
  object-position: center;
  z-index: -10;
  background-color: var(--bb-hero-video-placeholder-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Actual video element, child of video-container. Displays a background thumbnail image while the video loads */
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-image: url("/img/studying-6-thumb.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}

.hero-video.loaded {
  opacity: 1;
  transition: opacity 0.25s ease-in;
}

/* Video gradient overlay */
.video-overlay {
  position: absolute;
  top: calc(-1 * var(--bb-header-height)); /* Match video positioning */
  left: 0;
  width: 100%;
  height: 100vh; /* Fallback for older browsers */
  height: 100dvh; /* Dynamic viewport height for iOS 26+ - overlay only */
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -9; /* Above video but below content */
}

.features-section {
  background: linear-gradient(
    to bottom,
    var(--bb-gradient-start) 0%,
    var(--bb-gradient-end) 100%
  );
  min-height: 100vh; /* Minimum viewport height, can expand */
}

/* Last section uses natural height */
.last-section {
  background: linear-gradient(
    to bottom,
    var(--bb-gradient-start) 0%,
    var(--bb-gradient-end) 100%
  );
  min-height: auto;
}

.last-section p {
  color: var(--bb-text-secondary);
}

.last-section h2 {
  color: var(--bb-text-primary);
  text-align: center;
  padding-bottom: 1.65rem;
  font-weight: 600;
}

.last-section h3 {
  color: var(--bb-text-primary);
}

.features-section p {
  color: var(--bb-text-secondary);
}

.features-section h2 {
  color: var(--bb-text-primary);
  text-align: center;
  padding-bottom: 1.65rem;
  font-weight: 600;
}

.features-grid h3 {
  color: var(--bb-text-primary);
}

.feature-card {
  color: var(--bb-text-primary);
  margin-bottom: 1rem;
}

h3 {
  padding-bottom: 0.8rem;
}

.feature-card img {
  max-width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.logotype {
  font-family: "DankMono-Bold";
  font-weight: 600;
  letter-spacing: -7%;
  color: var(--bb-text-primary);
}

.placeholder {
  background-color: var(--bb-bg-tertiary);
  color: var(--bb-text-primary);
  text-align: center;
  padding: 50px;
  margin: 10px 0;
  border-radius: 8px;
}

footer {
  background-color: var(--bb-footer-bg);
  text-align: center;
  color: var(--bb-text-primary);
}

.benkyo-box-icon {
  height: 52px;
  margin-right: 10px;
  margin-bottom: 5px;
  display: block; /* Ensure proper display */
}

.benkyo-box-title {
  font-family: "Quicksand-Bold";
  color: var(--bb-text-primary);
}

/* || Header Responsive adjustments */

@media (max-width: 768px) {
  .header-container {
    height: var(--bb-header-height-tablet); /* Constant height for tablet */
  }

  body {
    padding-top: var(
      --bb-header-height-tablet
    ); /* Account for smaller fixed header */
  }

  .hero-section,
  .features-section {
    min-height: calc(
      100vh - var(--bb-header-height-tablet)
    ); /* Keep content layout static */
  }

  .hero-video {
    top: calc(
      -1 * var(--bb-header-height-tablet)
    ); /* Match tablet header height */
  }

  .centered-logo-container {
    padding: 1.5rem 0 0.75rem 0;
    margin-bottom: 0;
  }

  .centered-logo-icon {
    height: 20vh; /* Smaller on tablet */
    max-height: 200px;
    min-height: 120px;
    margin-bottom: 0.75rem;
  }

  .content .centered-logo-title {
    font-size: clamp(1.5rem, 6vw, 4rem);
    color: #ffffff !important;
  }

  /* Desktop layout adjustments for tablet */
  .hero-desktop-layout {
    gap: 2rem;
    padding: 1rem;
    padding-top: 0.5rem; /* Move up on tablet too */
  }

  .hero-desktop-logo-icon {
    height: 200px;
    margin-bottom: 2rem;
  }

  .hero-desktop-description {
    font-size: 1.5rem;
  }

  .header-content {
    padding: 0.25rem 0.5rem;
  }

  .benkyo-box-icon {
    height: 40px;
    margin-right: 8px;
  }
}

@media (max-width: 480px) {
  .header-container {
    height: var(--bb-header-height-mobile); /* Constant height for mobile */
  }

  body {
    padding-top: var(
      --bb-header-height-mobile
    ); /* Account for smallest fixed header */
  }

  .hero-section,
  .features-section {
    min-height: calc(
      100vh - var(--bb-header-height-mobile)
    ); /* Keep content layout static */
  }

  .hero-video {
    top: calc(
      -1 * var(--bb-header-height-mobile)
    ); /* Match mobile header height */
  }

  .centered-logo-container {
    padding: 1rem 0 0.5rem 0;
    margin-bottom: 0;
  }

  .centered-logo-icon {
    height: 15vh; /* Smaller on mobile */
    max-height: 150px;
    min-height: 100px;
    margin-bottom: 0.5rem;
  }

  .content .centered-logo-title {
    font-size: clamp(1.75rem, 7vw, 4rem);
    color: #ffffff !important; /* Ensure white color in mobile view */
  }

  /* Desktop layout adjustments for mobile - keep mobile layout */
  .hero-desktop-layout {
    display: none !important; /* Force mobile layout on small screens */
  }

  .benkyo-box-icon {
    height: 35px;
    margin-right: 6px;
  }
}

/* || Sidebar styles */
#sidebar {
  width: 280px;
  height: calc(100vh - var(--bb-header-height) - 3rem);
  background-color: var(--bb-bg-secondary);
  border-right: 1px solid var(--bb-border-color);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  /* overflow-y: auto; */
  overflow-x: hidden;
  position: sticky;
  top: var(--bb-header-height);
  left: 0;
  align-self: flex-start;
}

#sidebar .btn-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: var(--bb-text-primary);
  background-color: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  border-radius: 0.375rem;
  position: relative;
}

#sidebar .btn-toggle[data-bs-toggle="collapse"]::after {
  content: "▶";
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}

#sidebar .btn-toggle[data-bs-toggle="collapse"]:not(.collapsed)::after {
  transform: rotate(90deg);
}

#sidebar .btn-toggle:hover,
#sidebar .btn-toggle:focus {
  color: var(--bb-text-primary);
  background-color: var(--bb-sidebar-hover);
  text-decoration: none;
}

#sidebar .btn-toggle-nav a {
  display: block;
  width: 100%;
  padding: 0.1875rem 0.5rem;
  padding-left: 1.5rem; /* visual indent without shrinking background */
  margin-top: 0.125rem;
  text-decoration: none;
  color: var(--bb-text-secondary);
  border-radius: 0.375rem;
  font-weight: 400;
}

#sidebar .btn-toggle-nav a:hover {
  background-color: var(--bb-sidebar-hover);
  color: var(--bb-text-secondary);
  text-decoration: none;
}

#sidebar .btn-toggle-nav a.active {
  background-color: var(--bb-bg-tertiary);
  color: var(--bb-accent);
  font-weight: 500;
}

/* Ensure top-level links (anchor variant) do not underline and show selected state */
#sidebar a.btn.btn-toggle {
  text-decoration: none;
}
#sidebar a.btn.btn-toggle:hover {
  text-decoration: none;
}
#sidebar a.btn.btn-toggle.active {
  background-color: var(--bb-bg-tertiary);
  color: var(--bb-accent);
  font-weight: 500;
}

/* Dark mode adjustments for selected state */
[data-bs-theme="dark"] #sidebar .btn-toggle-nav a.active,
[data-bs-theme="dark"] #sidebar a.btn.btn-toggle.active {
  background-color: var(--bb-accent);
  color: #ffffff;
}

/* Sidebar responsive tweaks */
@media (max-width: 768px) {
  #sidebar {
    width: 100%;
    position: relative;
    top: 0;
  }
}

/* Table styles */

.bb-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
}

.bb-table th,
.bb-table td {
  padding: 0.5em 1em 0.5em 0.5em;
}

/* Keyboard Shortcuts table styles */

.bb-table.keyboardshortcuts thead tr {
  border-bottom: 1px dotted var(--bb-table-kbshortcuts-divider);
}

.bb-table.keyboardshortcuts tbody tr {
  border-bottom: 1px dotted var(--bb-table-kbshortcuts-divider);
}

.bb-table.keyboardshortcuts tbody tr:nth-child(even) {
  background-color: var(--bb-table-kbshortcuts-bg);
}

.bb-table.keyboardshortcuts kbd {
  font-size: 0.75em;
}

/* Carousel styles */
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  opacity: 0;
  transition: opacity 0.3s ease;
  top: 0;
  bottom: 0;
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.carousel .carousel-control-prev {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bb-carousel-gradient-color),
    transparent
  );
}

.carousel .carousel-control-next {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bb-carousel-gradient-color),
    transparent
  );
}

.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
  filter: brightness(0) saturate(100%) invert(0%) !important;
  position: relative;
  z-index: 1;
}

[data-bs-theme="dark"] .carousel .carousel-control-prev-icon,
[data-bs-theme="dark"] .carousel .carousel-control-next-icon {
  filter: brightness(0) invert(1) !important;
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
  opacity: 1;
}

.carousel .carousel-control-prev:hover {
  background: linear-gradient(
    to right,
    var(--bb-carousel-gradient-color),
    transparent
  );
}

.carousel .carousel-control-next:hover {
  background: linear-gradient(
    to left,
    var(--bb-carousel-gradient-color),
    transparent
  );
}

.carousel .carousel-item {
  transition: transform 0.3s ease-in-out;
}

.carousel .carousel-item img {
  padding-bottom: 1rem;
}

/* Box styles */
.box {
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 5px 10px 5px 35px;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}

.box:before {
  position: absolute;
  left: 8px;
  top: 8px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
}

.box.info {
  background-color: rgba(0, 123, 255, 0.1);
  border-left: 4px solid #007bff;
  color: var(--bb-text-primary);
}

.box.info:before {
  content: "\f05a"; /* fa-info-circle */
  color: #007bff;
}

.box.note {
  background-color: rgba(255, 193, 7, 0.1);
  border-left: 4px solid #ffc107;
  color: var(--bb-text-primary);
}

.box.note:before {
  content: "\f249"; /* fa-note-sticky */
  color: #ffc107;
}

.box.tip {
  background-color: rgba(40, 167, 69, 0.1);
  border-left: 4px solid #28a745;
  color: var(--bb-text-primary);
}

.box.tip:before {
  content: "\f0eb"; /* fa-lightbulb */
  color: #28a745;
}