/**
 * Hovercard Popover 스타일
 *
 * Bootstrap 5 Popover를 커스터마이징합니다.
 * 깔끔하고 모던한 사용자 정보 카드 디자인
 *
 * 이 파일은 widgets/hovercard/hovercard.php 에서 로드됩니다.
 * @see js/hovercard.js (JavaScript 모듈)
 */

/* ==================== Popover 기본 스타일 ==================== */

/* Popover 기본 스타일 - 최소 너비와 최대 너비 설정 */
.hovercard-popover {
    min-width: 280px;
    max-width: 320px;
}

.hovercard-popover .popover-body {
    padding: 0 !important;
}

/* ==================== Hovercard 내부 스타일 ==================== */

.hovercard {
    font-size: 0.875rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* 헤더 영역 - 아바타와 이름 */
.hovercard-header {
    padding: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* 🔥 아바타 컨테이너 - 고정 크기 + overflow hidden으로 이미지 잘림 방지 */
.hovercard-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 아바타 이미지 스타일 - 컨테이너에 맞게 크기 조정 */
.hovercard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 아바타 대체 텍스트 (이미지 없을 때) */
.hovercard-avatar-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}

/* 사용자 정보 */
.hovercard-info {
    flex: 1;
    min-width: 0;
}

.hovercard-name {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hovercard-joined {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* ==================== 통계 영역 ==================== */

.hovercard-stats {
    display: flex;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.hovercard-stat {
    flex: 1;
    text-align: center;
}

.hovercard-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #495057;
    display: block;
}

.hovercard-stat-label {
    font-size: 0.7rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== 액션 버튼 영역 ==================== */

.hovercard-actions {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
}

.hovercard-actions .btn {
    flex: 1;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.hovercard-actions .btn i {
    font-size: 0.875rem;
}

/* ==================== 트리거 요소 hover 스타일 ==================== */

.hovercard-trigger {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.hovercard-trigger:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==================== 반응형: 모바일 ==================== */

@media (max-width: 576px) {
    .hovercard-popover {
        min-width: 260px;
        max-width: 280px;
    }

    .hovercard-actions .btn {
        padding: 8px 10px;
        font-size: 0.7rem;
    }

    .hovercard-avatar {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        max-width: 48px;
        max-height: 48px;
    }
}

/* ==================== User Info 컴포넌트 스타일 ==================== */
/* snippet_user_info() 함수에서 사용하는 공통 스타일 */

/* 기본 컨테이너 */
.user-info {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* 이름 스타일 */
.user-info-name {
    font-weight: 500;
    color: #333;
}

/* badge 스타일 - 배경색 있는 알약 모양 */
.user-info-badge {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.user-info-badge:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* compact 스타일 - 최소 간격 */
.user-info-compact {
    gap: 0.25rem !important;
}

/* 채팅 아이콘 스타일 */
.user-info-chat {
    font-size: 0.875rem;
    opacity: 0.7;
    transition: all 0.15s ease;
    text-decoration: none;
}

.user-info-chat:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* 채팅 아이콘 - badge 스타일 내에서는 살짝 구분선 추가 */
.user-info-badge .user-info-chat {
    padding-left: 0.375rem;
    margin-left: 0.125rem;
    border-left: 1px solid #dee2e6;
}