/* DARK */
[data-bs-theme="dark"] {
  --primary: #a855f7;
  --bs-primary-rgb: 168, 85, 247;
}

/* LIGHT */
[data-bs-theme="light"] {
  --primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
}
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: #c084fc;
  --bs-btn-hover-border-color: #c084fc;

  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}
.form-label {
  color: #fff !important;
}

.hover-card {
  position: relative;
}

.title-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  max-height: 40px;
  overflow: hidden;

  background: var(--bs-card-bg);
  z-index: 10;

  transition: max-height 0.25s ease;
}

.hover-card:hover .title-box {
  max-height: 150px;
}

.tag-dropdown {
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 100%;
  width: max-content;

  max-width: 100%;

  z-index: 999;

  max-height: 220px;
  overflow-y: auto;

  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* each tag = full row */
.tag-item {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);

  /* wrap long text */
  white-space: normal;
  word-break: break-word;
}

.tag-item:hover {
  background: var(--bs-primary);
  color: white;
  cursor: pointer;
}

.filter-option {
  background: transparent;
  border: 0;
  color: var(--bs-secondary-color);
  font-weight: 600;
  padding: .5rem 1rem;
  transition: .2s;
}

.filter-option:hover {
  color: var(--primary);
}

.filter-option.active {
  border-bottom: 3px solid var(--primary);
  background: linear-gradient(
    180deg,
    rgba(168,85,247,0.25),
    transparent
  );
}

.notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* padding: 10px 20px; */
    z-index: 1000;
}