/**
 * User Cell & Avatar Styles
 * Styles for displaying user avatars and names in dataviews
 */

/* User Cell Container */
.dv-user-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--content-text);
}

.dv-user-unassigned {
  color: var(--content-text-secondary);
  opacity: 0.6;
}

.dv-user-loading {
  color: var(--content-text-secondary);
  font-size: 0.75rem;
  font-style: italic;
}

/* Avatar Image */
.dv-user-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--primary-color);
}

/* Avatar Sizes */
.dv-user-avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 0.625rem;
}

.dv-user-avatar-md {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.dv-user-avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 0.875rem;
}

/* Avatar with Initials Fallback */
.dv-user-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

/* User Name */
.dv-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* User Select Field in Forms */
.dv-user-select-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dv-user-select {
  width: 100%;
}

.dv-user-select-preview {
  padding: 0.5rem;
  background: var(--hover-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.dv-user-select-preview .dv-user-cell {
  font-size: 0.9375rem;
}

/* Avatar in Table View - More Compact */
.dv-table .dv-user-cell {
  gap: 0.375rem;
}

.dv-table .dv-user-name {
  max-width: 100px;
}

/* Avatar in Card/Kanban Views - Avatar Only with Tooltip */
.dv-card .dv-user-cell,
.dv-kanban-card .dv-user-cell {
  gap: 0;
}

/* Avatar Stack (for future use with multiple assignees) */
.dv-user-avatar-stack {
  display: flex;
}

.dv-user-avatar-stack .dv-user-avatar {
  margin-left: -8px;
  border: 2px solid var(--content-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dv-user-avatar-stack .dv-user-avatar:first-child {
  margin-left: 0;
}

/* Kanban Card Avatar */
.dv-kanban-card-assignee {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.dv-kanban-card-assignee .dv-user-avatar {
  border: 2px solid var(--content-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* List View Avatar */
.dv-list-item-assignee {
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* Card View Avatar */
.dv-card-assignee {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.dv-card-assignee .dv-user-avatar {
  border: 2px solid var(--content-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Badge color classes for avatar initials fallback */
.dv-user-avatar-initials.dv-badge-blue { background: #3b82f6; }
.dv-user-avatar-initials.dv-badge-sky { background: #0ea5e9; }
.dv-user-avatar-initials.dv-badge-indigo { background: #6366f1; }
.dv-user-avatar-initials.dv-badge-violet { background: #8b5cf6; }
.dv-user-avatar-initials.dv-badge-green { background: #22c55e; }
.dv-user-avatar-initials.dv-badge-emerald { background: #10b981; }
.dv-user-avatar-initials.dv-badge-teal { background: #14b8a6; }
.dv-user-avatar-initials.dv-badge-cyan { background: #06b6d4; }
.dv-user-avatar-initials.dv-badge-red { background: #ef4444; }
.dv-user-avatar-initials.dv-badge-orange { background: #f97316; }
.dv-user-avatar-initials.dv-badge-amber { background: #f59e0b; }
.dv-user-avatar-initials.dv-badge-yellow { background: #eab308; }
.dv-user-avatar-initials.dv-badge-pink { background: #ec4899; }
.dv-user-avatar-initials.dv-badge-rose { background: #f43f5e; }
.dv-user-avatar-initials.dv-badge-fuchsia { background: #d946ef; }
.dv-user-avatar-initials.dv-badge-purple { background: #a855f7; }
.dv-user-avatar-initials.dv-badge-lime { background: #84cc16; }
.dv-user-avatar-initials.dv-badge-slate { background: #64748b; }
.dv-user-avatar-initials.dv-badge-stone { background: #78716c; }
.dv-user-avatar-initials.dv-badge-zinc { background: #71717a; }

/* Dark Mode Adjustments */
[data-theme="dark"] .dv-user-select-preview {
  background: var(--hover-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .dv-user-avatar {
  border-color: var(--content-bg);
}

/* Hover effect on avatars */
.dv-user-avatar:hover {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

/* ========================================
   Inline User Selector (for table editing)
   ======================================== */

.dv-inline-user-selector {
  position: relative;
  min-width: 140px;
  outline: none;
}

.dv-inline-user-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--content-bg);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  cursor: pointer;
  min-height: 34px;
}

.dv-inline-user-current:hover {
  background: var(--hover-bg);
}

.dv-inline-user-arrow {
  margin-left: auto;
  color: var(--content-text-secondary);
  font-size: 0.75rem;
}

.dv-inline-user-loading {
  color: var(--content-text-secondary);
  font-size: 0.8125rem;
  font-style: italic;
}

.dv-inline-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--content-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.dv-inline-user-open .dv-inline-user-dropdown {
  display: block;
}

.dv-inline-user-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s ease;
}

.dv-inline-user-option:hover,
.dv-inline-user-option.selected {
  background: var(--hover-bg);
}

.dv-inline-user-option.current {
  background: var(--primary-color-light, rgba(102, 126, 234, 0.1));
}

.dv-inline-user-option .dv-autocomplete-current-indicator {
  color: var(--primary-color);
  font-size: 0.875rem;
  margin-right: 0.25rem;
}

.dv-inline-user-option .dv-user-unassigned {
  color: var(--content-text-secondary);
  font-size: 0.875rem;
}

/* Dark mode for user selector */
[data-theme="dark"] .dv-inline-user-dropdown {
  background: var(--content-bg);
  border-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dv-inline-user-option:hover,
[data-theme="dark"] .dv-inline-user-option.selected {
  background: var(--hover-bg);
}

[data-theme="dark"] .dv-inline-user-option.current {
  background: rgba(102, 126, 234, 0.2);
}