/**
 * Custom Tribute.js Styles for The Load Broker
 * Matches Bootstrap 5 theme styling
 */

/* Container */
.tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  max-height: 300px;
  max-width: 400px;
  min-width: 200px;
  overflow: auto;
  display: block;
  z-index: 999999;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* List container */
.tribute-container ul {
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
}

/* List items */
.tribute-container li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.15s ease-in-out;
}

.tribute-container li:hover,
.tribute-container li.highlight {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
}

/* Highlighted text in search results */
.tribute-container li span.menu-highlighted {
  font-weight: 600;
  color: var(--bs-primary, #0d6efd);
}

/* No match state */
.tribute-container li.no-match {
  cursor: default;
  color: var(--bs-secondary, #6c757d);
  font-style: italic;
}

/* Code styling for variable keys */
.tribute-container code {
  background-color: var(--bs-secondary-bg, #e9ecef);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

/* Dark mode support */
[data-bs-theme="dark"] .tribute-container ul {
  background: var(--bs-body-bg, #212529);
  border-color: var(--bs-border-color, #495057);
}

[data-bs-theme="dark"] .tribute-container li:hover,
[data-bs-theme="dark"] .tribute-container li.highlight {
  background-color: var(--bs-primary-bg-subtle, #031633);
}

[data-bs-theme="dark"] .tribute-container code {
  background-color: var(--bs-secondary-bg, #343a40);
}

/* Icon styling */
.tribute-container .fa-font { color: var(--bs-info, #0dcaf0); }
.tribute-container .fa-hashtag { color: var(--bs-success, #198754); }
.tribute-container .fa-toggle-on { color: var(--bs-warning, #ffc107); }
.tribute-container .fa-calendar { color: var(--bs-purple, #6f42c1); }
.tribute-container .fa-list { color: var(--bs-orange, #fd7e14); }
.tribute-container .fa-link { color: var(--bs-primary, #0d6efd); }
.tribute-container .fa-cog { color: var(--bs-secondary, #6c757d); }

/* ==========================================
   @Mention Styles
   ========================================== */

/* Avatar circle in mention dropdown */
.mention-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Contenteditable editor that replaces the textarea */
.mention-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--bs-secondary-color, #6c757d);
  pointer-events: none;
}

.mention-editor:focus {
  outline: none;
}

/* Inline mention tag inside the contenteditable editor */
.mention-tag {
  display: inline;
  padding: 0.1em 0.4em;
  margin: 0 1px;
  border-radius: 0.25rem;
  background-color: var(--bs-primary-bg-subtle, #cfe2ff);
  color: var(--bs-primary, #0d6efd);
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  user-select: all;
  cursor: default;
  line-height: 1.6;
}

/* Team mention tag — green tint */
.mention-tag-team {
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  color: var(--bs-success, #198754);
}

/* Rendered mention badge in displayed text (read-only views) */
.mention-badge {
  display: inline;
  color: var(--bs-primary, #0d6efd);
  font-weight: 600;
  cursor: default;
}

.mention-badge-team {
  color: var(--bs-success, #198754);
}

/* Dark mode */
[data-bs-theme="dark"] .mention-avatar {
  background-color: var(--bs-primary, #0d6efd);
}

[data-bs-theme="dark"] .mention-tag {
  background-color: var(--bs-primary-bg-subtle, #031633);
  color: var(--bs-info, #0dcaf0);
}

[data-bs-theme="dark"] .mention-tag-team {
  background-color: var(--bs-success-bg-subtle, #051b11);
  color: var(--bs-success, #75b798);
}

[data-bs-theme="dark"] .mention-badge {
  color: var(--bs-info, #0dcaf0);
}

[data-bs-theme="dark"] .mention-badge-team {
  color: var(--bs-success, #75b798);
}