/**
 * Icon System Styles
 * Theme-aware styling for Phosphor icons
 */

/* Base icon styles */
.icon-system {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

/* Fallback styles for when Phosphor isn't available */
.icon-fallback {
    border-radius: 50%;
    background-color: rgba(148, 163, 184, 0.2);
    color: rgb(71, 85, 105);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-size: 12px;
    text-align: center;
    line-height: 1;
}

.icon-fallback.theme-dark {
    background-color: rgba(71, 85, 105, 0.3);
    color: rgb(148, 163, 184);
}

/* Theme-based colors */
.icon-system.theme-light {
    color: rgb(71, 85, 105); /* slate-600 */
}

.icon-system.theme-dark {
    color: rgb(148, 163, 184); /* slate-400 */
}

/* Sport-specific icon styling */
.sport-icon {
    border-radius: 4px;
    padding: 2px;
}

.sport-icon.sport-mlb {
    color: #FE6A00;
    background-color: rgba(254, 106, 0, 0.1);
}

.sport-icon.sport-nba {
    color: #E21E1F;
    background-color: rgba(226, 30, 31, 0.1);
}

.sport-icon.sport-nfl {
    color: #6801A7;
    background-color: rgba(104, 1, 167, 0.1);
}

.sport-icon.sport-ncaam {
    color: #174DFF;
    background-color: rgba(23, 77, 255, 0.1);
}

.sport-icon.sport-tennis {
    color: #bfff00;
    background-color: rgba(191, 255, 0, 0.1);
}

.sport-icon.sport-soccer {
    color: #FFD800;
    background-color: rgba(255, 216, 0, 0.1);
}

.sport-icon.sport-wnba {
    color: #FA4D02;
    background-color: rgba(250, 77, 2, 0.1);
}

.sport-icon.sport-volleyball {
    color: #1DE382;
    background-color: rgba(29, 227, 130, 0.1);
}

/* Status icon styling */
.status-icon.status-live {
    color: #10b981; /* green-500 */
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-icon.status-hot {
    color: #ef4444; /* red-500 */
    animation: glow-red 1.5s ease-in-out infinite alternate;
}

.status-icon.status-cold {
    color: #06b6d4; /* cyan-500 */
    animation: glow-blue 1.5s ease-in-out infinite alternate;
}

.status-icon.status-trending-up {
    color: #10b981; /* green-500 */
}

.status-icon.status-trending-down {
    color: #ef4444; /* red-500 */
}

.status-icon.status-loading {
    color: #6366f1; /* indigo-500 */
    animation: spin 1s linear infinite;
}

.status-icon.status-success {
    color: #10b981; /* green-500 */
}

.status-icon.status-warning {
    color: #f59e0b; /* amber-500 */
}

.status-icon.status-error {
    color: #ef4444; /* red-500 */
}

.status-icon.status-info {
    color: #3b82f6; /* blue-500 */
}

/* Action icon styling */
.action-icon {
    cursor: pointer;
    border-radius: 4px;
    padding: 4px;
    transition: all 0.2s ease-in-out;
}

.action-icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

.theme-dark .action-icon:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.action-icon.action-bet {
    color: #10b981; /* green-500 */
}

.action-icon.action-bet:hover {
    background-color: rgba(16, 185, 129, 0.1);
}

.action-icon.action-share {
    color: #6366f1; /* indigo-500 */
}

.action-icon.action-share:hover {
    background-color: rgba(99, 102, 241, 0.1);
}

.action-icon.action-favorite {
    color: #ef4444; /* red-500 */
}

.action-icon.action-favorite:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

.action-icon.action-notification {
    color: #f59e0b; /* amber-500 */
}

.action-icon.action-notification:hover {
    background-color: rgba(245, 158, 11, 0.1);
}

/* UI icon styling */
.ui-icon {
    color: inherit;
}

.ui-icon.ui-menu,
.ui-icon.ui-close {
    cursor: pointer;
    border-radius: 4px;
    padding: 4px;
    transition: all 0.2s ease-in-out;
}

.ui-icon.ui-menu:hover,
.ui-icon.ui-close:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.theme-dark .ui-icon.ui-menu:hover,
.theme-dark .ui-icon.ui-close:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Size variants */
.icon-system[width="16"] {
    width: 16px;
    height: 16px;
}

.icon-system[width="20"] {
    width: 20px;
    height: 20px;
}

.icon-system[width="24"] {
    width: 24px;
    height: 24px;
}

.icon-system[width="32"] {
    width: 32px;
    height: 32px;
}

.icon-system[width="48"] {
    width: 48px;
    height: 48px;
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes glow-red {
    from {
        box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
    }
    to {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    }
}

@keyframes glow-blue {
    from {
        box-shadow: 0 0 5px rgba(6, 182, 212, 0.5);
    }
    to {
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .icon-system {
        filter: contrast(1.2);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .icon-system {
        transition: none;
    }
    
    .status-icon.status-live,
    .status-icon.status-hot,
    .status-icon.status-cold,
    .status-icon.status-loading {
        animation: none;
    }
}

/* Print styles */
@media print {
    .icon-system {
        color: black !important;
        background: none !important;
        box-shadow: none !important;
        animation: none !important;
    }
}

/* Button integration */
.btn .icon-system,
button .icon-system {
    margin-right: 0.5rem;
}

.btn .icon-system:only-child,
button .icon-system:only-child {
    margin-right: 0;
}

/* Navigation integration */
.nav-link .icon-system {
    margin-right: 0.5rem;
}

.nav-link .icon-system:only-child {
    margin-right: 0;
}

/* Table integration */
.table .icon-system {
    margin: 0 0.25rem;
}

/* Card integration */
.card-header .icon-system {
    margin-right: 0.5rem;
}

/* Badge integration */
.badge .icon-system {
    margin-right: 0.25rem;
}

.badge .icon-system:only-child {
    margin-right: 0;
}

/* Responsive sizing */
@media (max-width: 768px) {
    .sport-icon {
        padding: 1px;
    }
    
    .action-icon {
        padding: 3px;
    }
}

/* Focus states for accessibility */
.action-icon:focus-visible,
.ui-icon.ui-menu:focus-visible,
.ui-icon.ui-close:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Dark mode adjustments */
.theme-dark .sport-icon.sport-mlb {
    background-color: rgba(254, 106, 0, 0.2);
}

.theme-dark .sport-icon.sport-nba {
    background-color: rgba(226, 30, 31, 0.2);
}

.theme-dark .sport-icon.sport-nfl {
    background-color: rgba(104, 1, 167, 0.2);
}

.theme-dark .sport-icon.sport-ncaam {
    background-color: rgba(23, 77, 255, 0.2);
}

.theme-dark .sport-icon.sport-tennis {
    background-color: rgba(191, 255, 0, 0.2);
}

.theme-dark .sport-icon.sport-soccer {
    background-color: rgba(255, 216, 0, 0.2);
}

.theme-dark .sport-icon.sport-wnba {
    background-color: rgba(250, 77, 2, 0.2);
}

.theme-dark .sport-icon.sport-volleyball {
    background-color: rgba(29, 227, 130, 0.2);
}

/* Spinner animation for loading states */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}