/* =======================
   Midnight Theme (Blue/Silver/Purple)
   ======================= */
body {
  font-family: 'IM Fell English SC', serif;
  background: url('/img/bg-mid-2.png') no-repeat top center fixed;
  background-size: cover;
  color: #cce6ff; /* soft icy text */
}

html, body {
    background-color: #000; /* example dark page background */
}

code {
	color: #000;
	font-size: 1.1rem;
	font-weight: bold;
}

a {
  text-decoration: none;
  color: #a60000;
  text-shadow: 0 0 12px #5aaaff;
}

a:hover {
  text-decoration: none;
  color: limegreen;
  text-shadow: 0 0 12px #5aaaff;
}

.table-transparent {
    background-color: rgba(0, 0, 0, 0.5) !important; /* force transparency */
    color: #fff !important; /* ensure text is readable */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* optional subtle border */
}

.table-transparent th,
.table-transparent td {
    background-color: rgba(0, 0, 0, 0.3) !important; /* slight transparency for cells */
    border-color: rgba(255, 255, 255, 0.2) !important; /* cell borders */
	color: #fff !important;
}

.collapse-title {
  text-decoration: none;
  color: #a3d0ff;
  text-shadow: 0 0 12px #5aaaff;
}

#fireflyCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

label, #generate {
	color: #fff;
	font-size: 1.2rem;
}

/* =======================
   Hero
   ======================= */
.hero {
  padding: 6rem 1rem 5rem;
  text-align: center;
  color: #a3d0ff;
  text-shadow: 0 0 15px rgba(100, 160, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-logo {
  max-width: 300px;
  width: 100%;
  margin-bottom: 2rem;
  animation: float 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@media (max-width: 768px) {
  .hero { padding-top: 8rem; }
  .hero-logo { max-width: 250px; }
}

/* =======================
   Header
   ======================= */
header {
  position: relative;
  background: rgba(5, 15, 40, 0.9);
  padding: 54px;
  text-align: center;
  border-bottom: 2px solid rgba(80, 150, 255, 0.6);
  box-shadow: 0 0 25px rgba(100, 180, 255, 0.3);
  z-index: 1001;
}

header img {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  max-width: 300px;
  height: auto;
  pointer-events: none;
}

header h1 {
  font-size: 3rem;
  color: #a3d0ff;
  text-shadow: 0 0 12px #5aaaff;
  margin: 0;
}

/* =======================
   Navbar
   ======================= */
.navbar-custom {
  position: relative;
  min-height: 98px;
  background: rgba(5, 10, 35, 0.9);
  backdrop-filter: blur(8px);
  font-size: 22px;
  box-shadow: 0 0 25px rgba(100, 160, 255, 0.25);
  z-index: 1000;
}

.navbar-custom .nav-link {
  color: #a3d0ff;
  font-weight: bold;
  transition: 0.3s;
}

.navbar-custom .nav-link:hover {
  color: #78aaff;
  text-shadow: 0 0 10px rgba(150, 200, 255, 0.9);
}

.navbar-custom::after {
  content: "";
  display: block;
  width: 100%;
  height: 20px; /* border height */
  background-image: url('/img/b-top.png');
  background-repeat: repeat-x; /* ✅ tile horizontally */
  background-position: center bottom;
  background-size: 80px auto; /* ✅ each segment 80px wide, adjust as needed */
  position: absolute;
  left: 0;
  bottom: -15px;
  pointer-events: none;
}

.navbar-brand {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  color: #a3d0ff;
  font-weight: bold;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler i {
  color: #a3d0ff;
  font-size: 1.5rem;
}

/* =======================
   Sections
   ======================= */
section {
  padding: 80px 0;
}

section.bg-semi {
  background: rgba(5, 10, 35, 0.7);
  box-shadow: inset 0 0 60px rgba(30, 40, 100, 0.7);
  border-top: 2px solid rgba(100, 150, 255, 0.3);
  border-bottom: 2px solid rgba(100, 150, 255, 0.3);
}

section h2.section-title {
  font-size: 2.8rem;
  color: #a3d0ff;
  text-align: center;
  margin-bottom: 50px;
  text-shadow: 0 0 12px #5aaaff;
  border-bottom: 2px solid #5aaaff;
  display: inline-block;
  padding-bottom: 10px;
}

/* =======================
   Buttons
   ======================= */
.btn-custom {
  display: inline-flex;           /* enable flex layout */
  align-items: center;            /* vertical centering */
  justify-content: center;        /* horizontal centering */
  
  background-color: rgba(80, 140, 255, 0.8);
  color: #e8f4ff;
  font-weight: bold;
  border-radius: 5px;
  padding: 12px 25px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1rem;
  box-shadow: 0 0 15px rgba(100, 180, 255, 0.5);

  cursor: pointer;
}

.btn-custom:hover {
  background-color: #a3d0ff;
  color: #001633;
  box-shadow: 0 0 20px #a3d0ff;
}

/* =======================
   Cards
   ======================= */
.card-custom { 
	position: relative; 
	padding: 1rem; 
	margin: 1rem 0; 
	z-index: 0; 
	border: 0px solid #000; 
	border-radius: 6px;
	overflow: hidden; 
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	background: rgba(0, 0, 0, 0.2);
}

.card-custom2 { 
	width: auto;
	z-index: 0; 
	border: 1px solid #c4c4c4; 
	border-radius: 6px;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	background: rgba(0, 0, 0, 0.8);
	text-align: center;
}

/* Pseudo-element for semi-transparent background */
.card-custom::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/img/content-bg.png');
	background-size: cover;       /* stretch to cover container */
	background-repeat: no-repeat; /* prevent tiling */
	background-position: center;  /* center the image */
	opacity: 0.5;                 /* 50% transparency, adjust as needed */
	z-index: -1;                  /* behind content */
	border-radius: 6px;           /* match the card */
}
/* tweak thickness here (px) */ 
:root { --bd: 18px; } 
/* shared border rules */ 
.card-custom .border-top, .card-custom .border-bottom, .card-custom .border-left, .card-custom .border-right { 
	position: absolute; 
	background-repeat: no-repeat; 
	background-position: center center; 
	/* center the source image on the edge */ 
	background-size: 100% 100%; 
	/* stretch to fill the border box exactly */ 
	pointer-events: none; 
	z-index: 0; 
	/* keep borders behind card content */ 
	display: block; 
} 
/* TOP: stretches full card width, centered */ 
.card-custom .border-top {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: var(--bd);
  background-image: url('/img/b-top.png');
  background-repeat: repeat-x; /* 👈 repeat horizontally */
  background-position: top left; /* 👈 start from top, center horizontally */
  background-size: 80px auto; /* 👈 each tile is 80px wide */
  z-index: 0;
} /* BOTTOM: same behavior as top */ 
.card-custom .border-bottom {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: var(--bd);
  background-image: url('/img/b-bottom.png');
  background-repeat: repeat-x; /* 👈 repeat horizontally */
  background-position: bottom left; /* 👈 start from top, center horizontally */
  background-size: 80px auto; /* 👈 each tile is 80px wide */
} /* LEFT: stretches full card height, centered vertically */ 
.card-custom .border-left {
  position: absolute;
  top: 0;
  left: -2px;
  width: var(--bd);
  height: 100%;
  background-image: url('/img/b-left.png');
  background-repeat: repeat-y;
  background-position: left top;
  background-size: auto 80px; /* 👈 ensures each tile = 80px tall */
  z-index: -1;
}
/* RIGHT: same behavior as left */ 
.card-custom .border-right {
  position: absolute;
  top: 0;
  right: -2px;
  width: var(--bd);
  height: 100%;
  background-image: url('/img/b-right.png');
  background-repeat: repeat-y;
  background-position: right top;
  background-size: auto 80px; /* 👈 ensures each tile = 80px tall */
  z-index: -1;
} /* ensure card content sits above the borders */ 
.card-custom > .card-body, .card-custom h5, .card-custom p, .card-custom form, .card-custom header, .card-custom footer { 
	position: relative; 
	z-index: 1; 
} 
.card-custom:hover { 
	transform: translateY(-5px); 
	box-shadow: 0px 0px 20px rgba(142, 250, 255,0.8); 
} 
.card-custom h5 { 
	color: #8efaff; 
	margin-bottom: 15px; 
	font-size: 1.5rem; 
	text-shadow: 0 0 10px #5569ff; 
} 
.card-custom p { 
	color: #c7f8ff; 
	font-size: 1rem; 
}

/* =======================
   Sidebar
   ======================= */
.sidebar {
  background: rgba(10, 15, 45, 0.8);
  border: 2px solid #5aaaff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  backdrop-filter: blur(6px);
}

.sidebar h4 {
  color: #a3d0ff;
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-shadow: 0 0 8px #5aaaff;
}

.sidebar a {
  color: #cce6ff;
  text-decoration: none;
  display: block;
  padding: 8px 0;
  font-size: 1rem;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #78aaff;
  padding-left: 12px;
}

/* =======================
   Footer
   ======================= */
.page-footer {
  position: relative; /* needed for ::before positioning */
  text-align: center;
  padding: 20px;
  background: rgba(5, 15, 40, 0.9);
  color: #b3d9ff;
  font-size: 0.95rem;
  box-shadow: 0 0 20px rgba(255, 120, 0, 0.3);
}

/* image-based repeating top border */
.page-footer::before {
  content: "";
  display: block;
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px; /* same as your image height */
  background-image: url('/img/b-bottom.png');
  background-repeat: repeat-x; /* ✅ repeat horizontally */
  background-position: top center;
  background-size: 80px auto; /* ✅ one tile = 80px wide */
  pointer-events: none;
}

.news-body {
	padding: 25px 25px 25px 25px;
	font-size: 1.2rem;
}

.news-footer {
  text-align: center;
  padding: 20px;
  background: rgba(5, 15, 40, 0.9);
  border-top: 2px solid rgba(100, 150, 255, 0.4);
  color: #b3d9ff;
  font-size: 0.95rem;
  box-shadow: 0 0 20px rgba(100, 180, 255, 0.3);
}
/* =======================
   Responsive
   ======================= */
@media (max-width: 992px) {
  .hero h2 { font-size: 2rem; }
  .hero p { font-size: 1.1rem; }
  .card-custom h5 { font-size: 1.3rem; }
  .sidebar h4 { font-size: 1.3rem; }
}

@media (max-width: 576px) {
  .hero { height: 350px; padding: 15px; }
  .btn-custom { padding: 10px 18px; font-size: 0.95rem; }
}

*::-webkit-scrollbar {
    width: 8px;               /* width of scrollbar */
    height: 8px;              /* optional for horizontal scrollbars */
}

*::-webkit-scrollbar-track {
    background: transparent;  /* transparent track */
}

*::-webkit-scrollbar-thumb {
    background-color: #a3d0ff; /* scrollbar color */
    border-radius: 4px;        /* rounded edges */
    border: 2px solid transparent; /* optional padding effect */
}

/* Firefox */
* {
    scrollbar-width: thin;               /* thinner scrollbars */
    scrollbar-color: #a3d0ff transparent; /* thumb color + track color */
}

.dropdown-menu {
    z-index: 1050 !important; /* above most other elements */
}

#bugDetailCard h4 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

#bugDetailCard p {
    margin: 0.3rem 0;
    font-size: 1rem;
    text-align: left; /* left align for readability */
}

#bugDetailCard h5 {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    text-align: left;
}

#bugDetailCard .badge {
    font-size: 0.9rem;
    padding: 0.4em 0.7em;
}

#bugDetailCard .btn-custom {
    margin-top: 1.5rem;
    display: inline-block;
}