:root {
    --bs-primary: #3489c6;
    --bs-primary-rgb: 52, 137, 198;
    --bs-body-font-size: 0.875rem;
}

.nav-tabs, .nav {
    --bs-nav-tabs-link-active-border-color: #3489c6;
    --bs-primary: #3489c6;
}
.navbar-nav {
    --bs-nav-link-font-size: 0.875rem;
}
:root, [data-bs-theme=light] {
  --bs-primary: #3489c6;
  --bs-primary-rgb: 52, 137, 198;
}

.btn {
  --bs-btn-font-size: 0.875rem;
  --bs-primary: #3489c6;
}

.dropdown-menu {
  --bs-dropdown-font-size: 0.875rem;
}

.form-control {
  font-size: 0.875rem;
  line-height: 24px;
}

.menu-vertical .menu-item .menu-link.active-folder {
  border-left: 3px solid var(--bs-primary);
  border-radius: 0;
  font-weight: 500;
  transform: translateX(-3px);
}

.menu-vertical .menu-item .menu-link {
  font-size: 14px;;
}
.menu-link .folder-link:hover {
  transition: all 0.3s ease;
  font-weight: 500;
  color: var(--bs-primary);
}

.material-symbols-rounded {
  font-size: inherit;
  transform: scale(1.2) translateY(1px);
}

.form-control[type="datetime-local"] {
  height: 38px;;
}

#userSuggestions {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0.375rem;
    padding: 0;
}

#userSuggestions .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#userSuggestions .dropdown-item:hover {
    background-color: #f8f9fa;
}

#userSuggestions .dropdown-item.active {
    background-color: #e9ecef;
    color: #000;
    font-weight: 500;
}

#userSuggestions:not(.d-none) {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.coming-soon {
  cursor: not-allowed;
  color: #6c757d;
  opacity: 0.6;
  /* pointer-events: none; */
}

.coming-soon input,
.coming-soon label {
  pointer-events: none;
}

.coming-soon:hover::after {
  opacity: 1;
}

coming-soon::after {
  position: absolute;
  top: -1.8em;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

label.required::after {
  content: " *";
  color: #ea5455;
  font-weight: bold;
}

[data-bs-theme=dark] .board-panel-status-label {
  --bs-dark-rgb: #333;
  --bs-text-opacity: 1;
}