/* src/main/resources/static/css/admin-menu.css */

/* 공통 스타일 */
#adminCategory {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    background: transparent;
    border-radius: 8px;
    margin: 5px 0 15px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.admin-menu-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    margin: 0 !important;
    border-radius: 20px;
    text-decoration: none !important;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.8rem !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    width: auto !important;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: none;
}

/* 통일된 색상 팔레트 적용 - 비슷한 기능끼리 그룹화 */

/* 그룹 1: 관리/설정 (파란 계열) */
.admin-menu-item.admin-page {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.admin-menu-item.user-list {
    background: linear-gradient(135deg, #5c9ce6 0%, #4a8bd4 100%);
}

.admin-menu-item.domain-mng {
    background: linear-gradient(135deg, #6ba3eb 0%, #5293dc 100%);
}

/* 그룹 2: 콘텐츠 관리 (초록/청록 계열) */
.admin-menu-item.blog-tasks {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.admin-menu-item.blog-write {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}

.admin-menu-item.category-mng {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

/* 그룹 3: 미디어 관리 (보라/분홍 계열) */
.admin-menu-item.youtube-data {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.admin-menu-item.video-list-mng {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.admin-menu-item.video-mng {
    background: linear-gradient(135deg, #a569bd 0%, #9658a6 100%);
}

.admin-menu-item.thumbnail-gallery {
    background: linear-gradient(135deg, #b07cc6 0%, #9d6ab0 100%);
}

/* 그룹 4: 분석/통계 (주황/노랑 계열) */
.admin-menu-item.visit-stats {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

.admin-menu-item.naver-news {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

/* 그룹 5: 시스템/자동화 (청록/민트 계열) */
.admin-menu-item.batch-job {
    background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%);
}

/* 그룹 6: 마케팅 (보라/핑크 그라데이션 - 특별 강조) */
.admin-menu-item.marketing-team {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 그룹 7: 알바천국 (민트/청록 그라데이션 - 채용/HR) */
.admin-menu-item.alba-heaven {
    background: linear-gradient(135deg, #00d2d3 0%, #0abde3 100%);
}

/* 그룹 8: SEO/Canonical 관리 (인디고 그라데이션) */
.admin-menu-item.canonical-mng {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}

/* 호버 효과 - 통일된 애니메이션 */
.admin-menu-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 활성 상태 */
.admin-menu-item:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* 반응형 - 작은 화면에서 더 작게 */
@media (max-width: 768px) {
    #adminCategory {
        gap: 6px !important;
        padding: 10px 5px !important;
    }

    .admin-menu-item {
        padding: 6px 10px;
        font-size: 0.75rem !important;
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    #adminCategory {
        background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.05) 100%);
    }

    .admin-menu-item {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .admin-menu-item:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }
}