/**
 * EE Holdings reusable icon system
 * Works with existing Font Awesome classes.
 */

:root {
    --ee-icon-primary: #3498db;
    --ee-icon-success: #4ade80;
    --ee-icon-warning: #fbbf24;
    --ee-icon-danger: #f87171;
    --ee-icon-muted: #64748b;
    --ee-icon-text-on-solid: #ffffff;
    --ee-icon-surface: #f8fafc;
    --ee-icon-border: rgba(15, 23, 42, 0.15);
}

[data-theme="dark"] {
    --ee-icon-surface: #0f172a;
    --ee-icon-border: rgba(148, 163, 184, 0.28);
}

.ee-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--ee-icon-surface);
    color: var(--ee-icon-primary);
    border: 1px solid var(--ee-icon-border);
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}

.ee-icon > i,
.ee-icon > svg {
    font-size: 0.95rem;
}

.ee-icon--xs {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.35rem;
}

.ee-icon--xs > i,
.ee-icon--xs > svg {
    font-size: 0.65rem;
}

.ee-icon--sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
}

.ee-icon--sm > i,
.ee-icon--sm > svg {
    font-size: 0.75rem;
}

.ee-icon--lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
}

.ee-icon--lg > i,
.ee-icon--lg > svg {
    font-size: 1.1rem;
}

.ee-icon--hex {
    border-radius: 0;
    clip-path: polygon(25% 8%, 75% 8%, 100% 50%, 75% 92%, 25% 92%, 0% 50%);
    border: none;
}

.ee-icon--solid {
    background: var(--ee-icon-primary);
    color: var(--ee-icon-text-on-solid);
    border-color: transparent;
}

.ee-icon--success {
    color: var(--ee-icon-success);
}

.ee-icon--warning {
    color: var(--ee-icon-warning);
}

.ee-icon--danger {
    color: var(--ee-icon-danger);
}

.ee-icon--muted {
    color: var(--ee-icon-muted);
}

.ee-icon--verified {
    background: color-mix(in srgb, var(--ee-icon-primary) 18%, var(--ee-icon-surface));
    color: var(--ee-icon-primary);
    border-color: color-mix(in srgb, var(--ee-icon-primary) 35%, transparent);
}

.ee-icon--verified.ee-icon--solid {
    background: var(--ee-icon-primary);
    color: var(--ee-icon-text-on-solid);
}

.ee-network-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 999px;
    background: var(--ee-icon-muted);
    box-shadow: 0 0 0 0 rgba(100, 116, 139, 0.45);
}

.ee-network-dot--online {
    background: var(--ee-icon-success);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
    animation: ee-network-pulse 2s infinite;
}

.ee-network-dot--warning {
    background: var(--ee-icon-warning);
}

.ee-network-dot--offline {
    background: var(--ee-icon-danger);
}

@keyframes ee-network-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.ee-flag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--ee-icon-border);
    background: var(--ee-icon-surface);
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

[data-theme="dark"] .ee-flag-badge {
    color: #cbd5e1;
}

.ee-flag-badge > i {
    font-size: 0.8rem;
}

.ee-flag-badge--blue {
    background: color-mix(in srgb, #3498db 16%, var(--ee-icon-surface));
    border-color: color-mix(in srgb, #3498db 35%, transparent);
}

.ee-flag-badge--green {
    background: color-mix(in srgb, #4ade80 16%, var(--ee-icon-surface));
    border-color: color-mix(in srgb, #4ade80 35%, transparent);
}

.ee-flag-badge--amber {
    background: color-mix(in srgb, #fbbf24 18%, var(--ee-icon-surface));
    border-color: color-mix(in srgb, #fbbf24 35%, transparent);
}

.ee-flag-badge--red {
    background: color-mix(in srgb, #f87171 16%, var(--ee-icon-surface));
    border-color: color-mix(in srgb, #f87171 35%, transparent);
}