/* Enhanced CSS Icons - Complete fallback system for emoji rendering issues */

/* CRITICAL: Force all icon elements to display emojis properly */
.stat-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "Segoe UI Symbol", "Twemoji Mozilla", "Symbola", monospace !important;
    font-variant-emoji: emoji !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Primary emoji content - this should work on most systems */
.stat-icon.patients::before { content: "??" !important; }
.stat-icon.consultation::before { content: "??" !important; }
.stat-icon.staff::before { content: "?????" !important; }
.stat-icon.rooms::before { content: "??" !important; }

/* Unicode fallback if emoji fonts fail */
.stat-icon.patients:not(:empty):not(.has-emoji)::after { content: "\1F465" !important; }
.stat-icon.consultation:not(:empty):not(.has-emoji)::after { content: "\1FA7A" !important; }
.stat-icon.staff:not(:empty):not(.has-emoji)::after { content: "\1F468\200D\2695\FE0F" !important; }
.stat-icon.rooms:not(:empty):not(.has-emoji)::after { content: "\1F3E5" !important; }

/* Hide broken placeholder text and show fallback */
.stat-icon:contains("??") {
    font-size: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.stat-icon:contains("??")::before {
    font-size: 48px !important;
    text-indent: 0 !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Text-based icon fallbacks for when all emoji methods fail */
.stat-icon.patients.no-emoji::after {
    content: "??" !important;
    background: linear-gradient(45deg, #2196F3, #21CBF3) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 48px !important;
    font-weight: bold !important;
    display: block !important;
}

.stat-icon.consultation.no-emoji::after {
    content: "??" !important;
    background: linear-gradient(45deg, #FF5722, #FF8A65) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 48px !important;
    font-weight: bold !important;
    display: block !important;
}

.stat-icon.staff.no-emoji::after {
    content: "?????" !important;
    background: linear-gradient(45deg, #FFC107, #FFD54F) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 48px !important;
    font-weight: bold !important;
    display: block !important;
}

.stat-icon.rooms.no-emoji::after {
    content: "??" !important;
    background: linear-gradient(45deg, #4CAF50, #81C784) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 48px !important;
    font-weight: bold !important;
    display: block !important;
}

/* Ultimate fallback - text-based icons with symbols */
@supports not (content: "\1F465") {
    .stat-icon.patients::after {
        content: "?" !important;
        font-size: 48px !important;
        color: #2196F3 !important;
        font-weight: bold !important;
        display: block !important;
        text-align: center !important;
        line-height: 1 !important;
    }
    
    .stat-icon.consultation::after {
        content: "?" !important;
        font-size: 48px !important;
        color: #FF5722 !important;
        font-weight: bold !important;
        display: block !important;
        text-align: center !important;
        line-height: 1 !important;
    }
    
    .stat-icon.staff::after {
        content: "?" !important;
        font-size: 48px !important;
        color: #FFC107 !important;
        font-weight: bold !important;
        display: block !important;
        text-align: center !important;
        line-height: 1 !important;
    }
    
    .stat-icon.rooms::after {
        content: "?" !important;
        font-size: 48px !important;
        color: #4CAF50 !important;
        font-weight: bold !important;
        display: block !important;
        text-align: center !important;
        line-height: 1 !important;
    }
}

/* Button and other icon fixes */
.search-btn::before { content: "??" !important; }
.search-btn:empty::after { content: "\1F50D" !important; }

.notification-btn::before { content: "??" !important; }
.notification-btn:empty::after { content: "\1F514" !important; }

.payment-icon::before { content: "??" !important; }
.payment-icon:empty::after { content: "\1F4B3" !important; }

.balance-icon::before { content: "??" !important; }
.balance-chart::before { content: "??" !important; }

.call-btn::before { content: "??" !important; }
.menu-btn::before, .payment-menu::before, .doctor-menu::before { content: "?" !important; }

.nav-btn::before { content: "?" !important; }
.nav-btn:last-child::before { content: "?" !important; }

/* Force font families for all interactive elements */
.search-btn, .header-btn, .notification-btn, .payment-icon, .balance-icon, .balance-chart,
.call-btn, .menu-btn, .payment-menu, .doctor-menu, .nav-btn {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", "Segoe UI Symbol", "Twemoji Mozilla", "Symbola", monospace !important;
}

/* Hide question marks specifically */
*:contains("??") {
    position: relative;
}

*:contains("??")::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1;
}

/* Alternative CSS selector approach for broken emojis */
.stat-icon[data-icon="patients"]::after { content: "??" !important; }
.stat-icon[data-icon="consultation"]::after { content: "??" !important; }
.stat-icon[data-icon="staff"]::after { content: "?????" !important; }
.stat-icon[data-icon="rooms"]::after { content: "??" !important; }