/**
 * Bitcoin Sovereign Academy - Status Indicators
 *
 * Standardized color-coded indicators for use across all paths and demos.
 * Provides consistent visual language for security levels, fees, network status, etc.
 *
 * Usage:
 * <span class="status-dot status-critical"></span>
 * <div class="security-level security-level-beginner">...</div>
 */

:root {
    --status-critical: #ef4444;
    --status-high: #f97316;
    --status-medium: #eab308;
    --status-low: #84cc16;
    --status-success: #22c55e;
    --status-green: #00ff00;
    --status-yellow: #ffff00;
    --status-orange: #ff8c00;
    --status-red: #ff0000;
}

/* ========================================
   Status Dot Indicators
   ======================================== */

.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Critical/High/Medium/Low (Descriptive) */
.status-critical {
    background: var(--status-critical);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.status-high {
    background: var(--status-high);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.status-medium {
    background: var(--status-medium);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}

.status-low {
    background: var(--status-low);
    box-shadow: 0 0 8px rgba(132, 204, 22, 0.5);
}

.status-success {
    background: var(--status-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* Color Names (Green/Yellow/Orange/Red) */
.status-green {
    background: var(--status-green);
    box-shadow: 0 0 10px var(--status-green);
}

.status-yellow {
    background: var(--status-yellow);
    box-shadow: 0 0 10px var(--status-yellow);
}

.status-orange {
    background: var(--status-orange);
    box-shadow: 0 0 10px var(--status-orange);
}

.status-red {
    background: var(--status-red);
    box-shadow: 0 0 10px var(--status-red);
}

/* ========================================
   Emoji Icon Indicators (Accessibility)
   ======================================== */

.indicator-critical::before { content: "🔴 "; }
.indicator-high::before { content: "🟠 "; }
.indicator-medium::before { content: "🟡 "; }
.indicator-low::before { content: "🟢 "; }
.indicator-success::before { content: "✅ "; }

/* ========================================
   Security Level Cards
   ======================================== */

.security-level {
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 3px solid;
}

.security-level-beginner {
    background: rgba(255, 255, 0, 0.1);
    border-color: var(--status-yellow);
}

.security-level-intermediate {
    background: rgba(255, 140, 0, 0.1);
    border-color: var(--status-orange);
}

.security-level-advanced {
    background: rgba(0, 255, 0, 0.1);
    border-color: var(--status-green);
}

.security-level-critical {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--status-critical);
}

/* ========================================
   Fee Priority Indicators
   ======================================== */

.fee-priority {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.fee-urgent {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-critical);
    border: 2px solid var(--status-critical);
}

.fee-high {
    background: rgba(249, 115, 22, 0.1);
    color: var(--status-high);
    border: 2px solid var(--status-high);
}

.fee-normal {
    background: rgba(234, 179, 8, 0.1);
    color: var(--status-medium);
    border: 2px solid var(--status-medium);
}

.fee-low {
    background: rgba(132, 204, 22, 0.1);
    color: var(--status-low);
    border: 2px solid var(--status-low);
}

/* ========================================
   Confirmation Progress
   ======================================== */

.confirmation-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

.confirmations-0 {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-critical);
}

.confirmations-1 {
    background: rgba(249, 115, 22, 0.1);
    color: var(--status-high);
}

.confirmations-2-3 {
    background: rgba(234, 179, 8, 0.1);
    color: var(--status-medium);
}

.confirmations-4-5 {
    background: rgba(132, 204, 22, 0.1);
    color: var(--status-low);
}

.confirmations-6-plus {
    background: rgba(34, 197, 94, 0.1);
    color: var(--status-success);
}

/* ========================================
   Network Security Status
   ======================================== */

.network-status {
    padding: 1rem;
    border-radius: 0.75rem;
    border-left: 4px solid;
}

.network-weak {
    background: rgba(239, 68, 68, 0.05);
    border-color: var(--status-critical);
}

.network-growing {
    background: rgba(249, 115, 22, 0.05);
    border-color: var(--status-high);
}

.network-strong {
    background: rgba(132, 204, 22, 0.05);
    border-color: var(--status-low);
}

.network-dominant {
    background: rgba(34, 197, 94, 0.05);
    border-color: var(--status-success);
}

/* ========================================
   Risk Level Badges
   ======================================== */

.risk-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.risk-critical {
    background: var(--status-critical);
    color: white;
}

.risk-high {
    background: var(--status-high);
    color: white;
}

.risk-medium {
    background: var(--status-medium);
    color: #000;
}

.risk-low {
    background: var(--status-low);
    color: white;
}

.risk-none {
    background: var(--status-success);
    color: white;
}

/* ========================================
   Progress Indicators
   ======================================== */

.progress-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.progress-dots {
    display: flex;
    gap: 0.5rem;
}

.progress-dots .status-dot {
    width: 16px;
    height: 16px;
    background: rgba(128, 128, 128, 0.3);
    box-shadow: none;
    margin: 0;
}

.progress-dots .status-dot.active {
    background: var(--status-success);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* ========================================
   Status Pills (Inline Text)
   ======================================== */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    vertical-align: middle;
}

.pill-critical {
    background: rgba(239, 68, 68, 0.2);
    color: var(--status-critical);
}

.pill-high {
    background: rgba(249, 115, 22, 0.2);
    color: var(--status-high);
}

.pill-medium {
    background: rgba(234, 179, 8, 0.2);
    color: var(--status-medium);
}

.pill-low {
    background: rgba(132, 204, 22, 0.2);
    color: var(--status-low);
}

.pill-success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--status-success);
}

/* ========================================
   Animated Status Indicators
   ======================================== */

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

.status-dot.pulsing {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px currentColor;
    }
    50% {
        box-shadow: 0 0 20px currentColor;
    }
}

.status-dot.glowing {
    animation: glow 2s ease-in-out infinite;
}

/* ========================================
   Accessibility & Dark Mode
   ======================================== */

/* Ensure sufficient contrast in both light and dark modes */
@media (prefers-color-scheme: dark) {
    .security-level-beginner {
        background: rgba(255, 255, 0, 0.15);
    }

    .security-level-intermediate {
        background: rgba(255, 140, 0, 0.15);
    }

    .security-level-advanced {
        background: rgba(0, 255, 0, 0.15);
    }
}

/* ========================================
   Utility Classes
   ======================================== */

.status-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
    .security-level {
        padding: 1rem;
    }

    .status-grid {
        grid-template-columns: 1fr;
    }

    .fee-priority,
    .confirmation-indicator {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}