/* Level Badge Color Scheme - Consistent across application */

/* Base level badge styling */
.level-badge,
.user-level-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    text-align: center;
    line-height: 1.2;
    height: 24px;
}

/* Novice - Cool Blue/Teal (Beginner friendly) */
.level-badge.level-novice,
.user-level-badge.level-novice,
.level-badge[data-level="novice"],
.level-badge[data-level="Novice"] {
    background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%) !important;
    color: #064e3b !important;
    border-color: #059669 !important;
    box-shadow: 0 1px 4px rgba(5, 150, 105, 0.3) !important;
}

/* Poet - Soft Purple (Creative) */
.level-badge.level-poet,
.user-level-badge.level-poet,
.level-badge[data-level="poet"],
.level-badge[data-level="Poet"] {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%) !important;
    color: #581c87 !important;
    border-color: #7c3aed !important;
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.3) !important;
}

/* Scholar - Deep Blue (Intellectual) */
.level-badge.level-scholar,
.user-level-badge.level-scholar,
.level-badge[data-level="scholar"],
.level-badge[data-level="Scholar"] {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important;
    color: #1e3a8a !important;
    border-color: #2563eb !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3) !important;
}

/* Guru - Rich Orange (Wise) */
.level-badge.level-guru,
.user-level-badge.level-guru,
.level-badge[data-level="guru"],
.level-badge[data-level="Guru"] {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%) !important;
    color: #9a3412 !important;
    border-color: #ea580c !important;
    box-shadow: 0 1px 4px rgba(234, 88, 12, 0.3) !important;
}

/* Wizard - Elegant Gold (Mastery) */
.level-badge.level-wizard,
.user-level-badge.level-wizard,
.level-badge[data-level="wizard"],
.level-badge[data-level="Wizard"] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #92400e !important;
    border-color: #d97706 !important;
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.3) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .level-badge,
    .user-level-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
    .level-badge,
    .user-level-badge {
        filter: brightness(0.9);
    }
}

/* Numeric Level Badge (New System) */
.level-badge.numeric-level,
.user-level-badge.numeric-level {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    color: #2e7d32 !important;
    border-color: #4caf50 !important;
    box-shadow: 0 1px 4px rgba(76, 175, 80, 0.3) !important;
    font-weight: 700;
}

/* Hover effects for interactive badges */
.level-badge:hover,
.user-level-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}