[data-theme="dark"],
[data-theme="dark"] body {
  color: #e0e0e0;
}

.card,
.list-group-item,
.breadcrumb {
  background-color: transparent !important;
}

[data-theme="dark"] .card {
  border-color: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .list-group-item {
  border-color: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .list-group-item-action:hover {
  background-color: #3a3a3a;
  border-color: #3a3a3a;
  color: #fff;
}

[data-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #e0e0e0;
}

[data-theme="dark"] .text-secondary {
  color: #a0a0b8 !important;
}

[data-theme="dark"] .text-muted {
  color: #8888a0 !important;
}

[data-theme="dark"] .card-title {
  color: #e0e0e0;
}

[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #e0e0e0;
}

[data-theme="dark"] a {
  color: #7eb8da;
}

[data-theme="dark"] a:hover {
  color: #a8d8f0;
}

[data-theme="dark"] .spinner-border {
  color: #7eb8da;
}

/* Day/night cycle background */
.day-night-bg {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 400vmax;
  height: 400vmax;
  transform: translate(-50%, 50%) rotate(0deg);
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffffff 50%, #1e1e1e 50%);
  transition: transform 0.8s ease-in-out;
  z-index: -1;
}

/* Smooth transition for theme switching */
body,
.card,
.list-group-item,
.breadcrumb,
a,
h4, h5, h6,
.text-secondary,
.text-muted {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Profile image day/night split */
.profile-img-container {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.profile-img-container img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.profile-img-dark-wrapper {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 202px;
  height: 202px;
  -webkit-mask-size: 400vmax 400vmax;
  mask-size: 400vmax 400vmax;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
}

.profile-img-dark-wrapper img {
  width: 202px;
  height: 202px;
  display: block;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  color: inherit;
  line-height: 1;
}

.theme-toggle:hover {
  opacity: 0.7;
}