/**
 * Premium Icons System
 * Professional icon replacements for emojis
 * 
 * @package SENNA_Launcher
 * @since 4.0.2
 */

/* Icon Font Import - Using Professional Icon Library */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Base Icon Styles */
.senna-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 16px;
    color: var(--premium-espresso, #0D353E);
    transition: all 0.3s ease;
}

.senna-icon-lg {
    width: 32px;
    height: 32px;
    font-size: 20px;
}

.senna-icon-xl {
    width: 48px;
    height: 48px;
    font-size: 28px;
}

/* Icon Mappings */
.icon-target::before { content: "\f140"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-chart::before { content: "\f200"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-handshake::before { content: "\f2b5"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-briefcase::before { content: "\f0b1"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-envelope::before { content: "\f0e0"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-book::before { content: "\f02d"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-graduation::before { content: "\f19d"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-compass::before { content: "\f14e"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-microphone::before { content: "\f130"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-calendar::before { content: "\f073"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-trophy::before { content: "\f091"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-star::before { content: "\f005"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-sparkle::before { content: "\f890"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-lightbulb::before { content: "\f0eb"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-rocket::before { content: "\f135"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-bolt::before { content: "\f0e7"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-trending::before { content: "\f201"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-gem::before { content: "\f3a5"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-check::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-times::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-fire::before { content: "\f06d"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-users::before { content: "\f0c0"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-building::before { content: "\f1ad"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-edit::before { content: "\f044"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-palette::before { content: "\f53f"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-dumbbell::before { content: "\f44b"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-search::before { content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-clipboard::before { content: "\f328"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-seedling::before { content: "\f4d8"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-bell::before { content: "\f0f3"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-location::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-comment::before { content: "\f075"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-gift::before { content: "\f06b"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.icon-medal::before { content: "\f5a2"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* Visual Card Icon Overrides */
.visual-card-icon {
    font-size: 32px !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--premium-espresso, #0D353E) !important;
}

.visual-card-icon::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Specific Visual Card Icons */
.visual-card[data-value="technical"] .visual-card-icon::before { 
    content: "\f200"; /* Chart icon */
}

.visual-card[data-value="network"] .visual-card-icon::before { 
    content: "\f2b5"; /* Handshake icon */
}

.visual-card[data-value="experience"] .visual-card-icon::before { 
    content: "\f0b1"; /* Briefcase icon */
}

.visual-card[data-value="brand"] .visual-card-icon::before { 
    content: "\f140"; /* Target icon */
}

.visual-card[data-value="clarity"] .visual-card-icon::before { 
    content: "\f14e"; /* Compass icon */
}

.visual-card[data-value="interview"] .visual-card-icon::before { 
    content: "\f130"; /* Microphone icon */
}

/* Action Item Icons */
.action-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 12px !important;
    color: var(--premium-gold, #C9A55C) !important;
}

.action-icon::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Remove any remaining emoji text */
.visual-card-icon:not(:empty) {
    font-size: 0 !important;
}

.visual-card-icon:not(:empty)::before {
    font-size: 32px !important;
}

.action-icon:not(:empty) {
    font-size: 0 !important;
}

.action-icon:not(:empty)::before {
    font-size: 16px !important;
}

/* Professional SVG Icon Alternative (for custom icons) */
.svg-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.svg-icon-lg {
    width: 32px;
    height: 32px;
}

.svg-icon-xl {
    width: 48px;
    height: 48px;
}

/* Icon Animation on Hover */
.visual-card:hover .visual-card-icon,
.action-item:hover .action-icon {
    transform: scale(1.1);
    color: var(--premium-gold, #C9A55C) !important;
}

/* Responsive Icon Adjustments */
@media (max-width: 767px) {
    .visual-card-icon {
        font-size: 28px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .visual-card-icon:not(:empty)::before {
        font-size: 28px !important;
    }
}