/* 북마크 버튼 스타일 */
.bookmark-btn {
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.bookmark-btn:hover {
    color: #0d6efd;
}

.bookmark-btn.active {
    color: #0d6efd;
}

/* 그룹 관련 스타일 */
.group-save-btn {
    background-color: #4a6fdc;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.group-save-btn:hover {
    background-color: #395bbf;
}

.group-save-btn i {
    margin-right: 5px;
}

/* 그룹 리본 스타일 */
.group-ribbon-btn {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer !important;
    font-size: 1.2rem;
    transition: color 0.3s ease;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-ribbon-btn:hover {
    color: #4a6fdc;
}

.group-ribbon-btn:hover .ribbon-image {
    stroke: #4a6fdc;
}

.group-ribbon-btn.active {
    color: #4a6fdc;
}

.group-ribbon-btn .ribbon-image {
    width: 20px;
    height: 24px;
    object-fit: contain;
    transition: stroke 0.3s, fill 0.3s;
}

.group-ribbon-btn.active .ribbon-image {
    animation: ribbon-pulse 2s infinite;
    fill: #4a6fdc;
    stroke: #4a6fdc;
}

.group-ribbon-btn.active i {
    animation: ribbon-pulse 2s infinite;
}

@keyframes ribbon-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* 알림 애니메이션 */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 300px;
    word-break: break-word;
}

.notification.show {
    transform: translateY(0);
    opacity: 1;
}

.notification.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notification.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.notification.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 그룹 목록 아이템 */
.group-list-item {
    padding: 10px 15px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #fff;
    transition: background-color 0.2s;
}

.group-list-item:hover {
    background-color: #f8f9fa;
}

.group-list-item .group-title {
    font-weight: 500;
    margin-bottom: 5px;
}

.group-list-item .group-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #6c757d;
}

/* 그룹 생성 폼 */
.group-form {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 15px;
}

.group-form .form-floating {
    margin-bottom: 15px;
}

/* 체크박스 스타일 개선 */
.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #4a6fdc;
    border-color: #4a6fdc;
}

/* 로딩 스피너 */
.spinner-container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* 모달 내부 스타일 */
.modal-body {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 15px 20px;
}

/* 계정 선택 표시 */
.selected-row {
    background-color: rgba(74, 111, 220, 0.1) !important;
}

.selected-counter {
    display: inline-block;
    background-color: #4a6fdc;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    line-height: 24px;
    text-align: center;
    margin-left: 8px;
}

/* 그룹 모달 스타일 */
#saveGroupModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

#groupList {
    max-height: 300px;
    overflow-y: auto;
}

/* 그룹 목록 스타일 */
.form-check-label {
    white-space: normal;
    word-break: break-word;
}

.view-group-btn {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.view-group-btn:hover {
    opacity: 1;
}

/* 계정 테이블 스타일 */
.accounts-table {
    overflow-x: auto;
}

/* 로딩 스피너 */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .notification {
        left: 20px;
        right: 20px;
        max-width: none;
    }
    
    .accounts-table th, 
    .accounts-table td {
        padding: 8px 5px;
        font-size: 0.9rem;
    }
}

/* 탑바 스타일 */
.topbar {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 0 15px 35px; /* 왼쪽 패딩을 35px로 조정하여 사이드바 콘텐츠와 정렬 */
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 44px; /* 사이드바와 동일한 높이에서 시작 */
    left: 240px; /* 사이드바 너비만큼 왼쪽에서 시작 */
    right: 0; /* 오른쪽 끝까지 */
    z-index: 999; /* 사이드바보다 낮지만 콘텐츠보다는 높게 */
}

.topbar .page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.topbar .user-welcome {
    font-size: 0.9rem;
    color: #555;
    display: flex;
    align-items: center;
    margin-right: 20px; /* 오른쪽 여백 추가 */
}

.topbar .user-welcome i {
    margin-right: 5px;
}

/* 데이터 내보내기 버튼 숨기기 */
#exportDataBtn, 
.btn-export-data, 
a[id="exportDataBtn"], 
button[id="exportDataBtn"],
.export-btn,
.fa-file-export {
    display: none !important;
}

/* 헤더 영역 (기존 헤더와 겹칠 경우 대비) */
.header-container,
.header {
    margin-top: 10px;
}

/* 바이오 텍스트 스타일 */
.tooltip-bio {
    display: block;
    margin-top: 4px;
}

.tooltip-bio .fullname {
    display: block;
    color: #666;
    font-size: 0.85rem;
    line-height: 1.4;
}