/**
 * Profile Modal CSS
 * Eternal Illusion - Profil modal stílusok
 * 2025. október 26.
 */

/* ===== PROFILE MODAL MAIN CONTAINER ===== */

.profile-modal-content {
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Universal Modal integration fix */
.universal-modal .modal-body .profile-modal-content {
    margin: -24px;
    padding: 0;
}

/* ===== LOADING & ERROR STATES ===== */

.profile-loading {
    text-align: center;
    padding: 40px 20px;
    color: #e0e6ed;
}

.loading-spinner {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffd700;
}

.profile-error {
    text-align: center;
    padding: 40px 20px;
    color: #e0e6ed;
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #ff6b6b;
}

.retry-btn {
    background: #5865f2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    background: #4752c4;
    transform: translateY(-1px);
}

/* ===== PROFILE SECTIONS ===== */

.profile-section {
    background: rgba(20, 30, 80, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.profile-section:last-child {
    margin-bottom: 0;
}

.section-header {
    background: rgba(255, 215, 0, 0.1);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header i {
    color: #ffd700;
    font-size: 1.1rem;
}

.section-header h3 {
    color: #ffd700;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===== DISCORD SECTION ===== */

.discord-info {
    padding: 20px;
}

.discord-main-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.discord-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.discord-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255, 215, 0, 0.3);
}

.discord-status {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: rgba(12, 20, 69, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(12, 20, 69, 0.9);
}

.discord-status i {
    font-size: 10px;
    color: #43b581; /* Default online zöld */
}

.discord-status.offline i { color: #747f8d; }
.discord-status.idle i { color: #faa61a; }
.discord-status.dnd i { color: #f04747; }

.discord-user-details {
    flex: 1;
    min-width: 0;
}

.discord-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e0e6ed;
    margin-bottom: 5px;
    word-break: break-word;
}

.discord-username {
    font-size: 0.9rem;
    color: #b0b8c1;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.discord-joined {
    font-size: 0.85rem;
    color: #8a92a8;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== DISCORD ROLES ===== */

.discord-roles-section h4 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    color: #e0e6ed;
    display: flex;
    align-items: center;
    gap: 8px;
}

.discord-roles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.discord-role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: #667eea;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.discord-role-badge.no-roles {
    background: #747f8d;
    color: #e0e6ed;
    font-style: italic;
}

/* ===== CHARACTERS SECTION ===== */

.characters-info {
    padding: 20px;
}

.no-characters {
    text-align: center;
    padding: 30px 20px;
    color: #8a92a8;
}

.no-characters i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #667eea;
}

.no-characters p {
    margin: 10px 0 5px 0;
    color: #e0e6ed;
}

.no-characters small {
    color: #8a92a8;
    font-size: 0.8rem;
}

.characters-list {
    display: grid;
    gap: 15px;
}

/* ===== CHARACTER CARDS ===== */

.character-card {
    background: rgba(30, 40, 90, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 6px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.character-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(30, 40, 90, 0.6);
}

.character-card.main-character {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.05);
}

.character-main-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.character-class-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.character-class-icon-img {
    font-size: 1.2rem;
    color: var(--class-color, #e0e6ed);
}

.character-details {
    flex: 1;
    min-width: 0;
}

.character-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.character-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--class-color, #e0e6ed);
    word-break: break-word;
}

.character-main-badge {
    background: #ffd700;
    color: #0c1445;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
}

.character-class-spec {
    font-size: 0.85rem;
    color: #b0b8c1;
    margin-bottom: 2px;
}

.character-realm {
    font-size: 0.75rem;
    color: #8a92a8;
}

.character-stats {
    text-align: right;
    flex-shrink: 0;
}

.character-ilvl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ilvl-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ilvl-color, #ffd700);
}

.ilvl-label {
    font-size: 0.7rem;
    color: #8a92a8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== STATS SECTION (jövőbeni használatra) ===== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
}

.stat-item {
    text-align: center;
    padding: 15px;
    background: rgba(30, 40, 90, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.8rem;
    color: #8a92a8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== WOW CLASS COLORS ===== */

.class-death-knight { --class-color: #C41F3B; }
.class-demon-hunter { --class-color: #A330C9; }
.class-druid { --class-color: #FF7D0A; }
.class-evoker { --class-color: #33937F; }
.class-hunter { --class-color: #ABD473; }
.class-mage { --class-color: #69CCF0; }
.class-monk { --class-color: #00FF96; }
.class-paladin { --class-color: #F58CBA; }
.class-priest { --class-color: #FFFFFF; }
.class-rogue { --class-color: #FFF569; }
.class-shaman { --class-color: #0070DE; }
.class-warlock { --class-color: #9482C9; }
.class-warrior { --class-color: #C79C6E; }

/* Item Level Colors */
.ilvl-mythic { --ilvl-color: #00ff00; } /* 700+ */
.ilvl-heroic { --ilvl-color: #ffff00; } /* 650+ */
.ilvl-normal { --ilvl-color: #ff8800; } /* <650 */

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
    .profile-modal-content {
        max-height: 90vh;
    }
    
    .discord-main-info {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .discord-user-details {
        text-align: center;
    }
    
    .character-card {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .character-main-info {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .discord-avatar {
        width: 60px;
        height: 60px;
    }
    
    .discord-status {
        width: 16px;
        height: 16px;
        bottom: 3px;
        right: 3px;
    }
    
    .character-class-icon {
        width: 35px;
        height: 35px;
    }
    
    .section-header {
        padding: 12px 15px;
    }
    
    .discord-info,
    .characters-info {
        padding: 15px;
    }
}