/**
 * CORNERSTONE Phase 5: Dashboard Visual Indicators
 * Badge CSS for impact scores, buzz, threat, and pinned articles
 * 
 * @version 1.0.0
 * @date October 25, 2025
 * @author CursorAI (Lucky Chat)
 * 
 * Features:
 * - Hidden by default (display: none)
 * - Theme integration via CSS variables
 * - Mobile-first responsive design
 * - Accessibility compliant
 * - Ready for activation when needed
 */

/* ============================================================
   IMPACT BADGES - Container
   ============================================================ */

.impact-badges {
    display: none;
    /* Hidden by default - activate when ready */
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

/* ============================================================
   BADGE BASE STYLES
   ============================================================ */

.badge {
    display: none;
    /* Hidden by default - activate when ready */
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    min-width: 20px;
    height: 20px;
    line-height: 1;
    border: 1px solid;
    font-family: 'Source Code Pro', monospace;
    transition: all 0.2s ease;
    cursor: help;
}

.badge:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px currentColor;
}

/* ============================================================
   PINNED BADGE (📌)
   ============================================================ */

.badge-pinned {
    background-color: var(--primary-color, #0ff);
    color: var(--bg-color, #000);
    border-color: var(--primary-color, #0ff);
    box-shadow: 0 0 5px var(--primary-color, #0ff);
}

.badge-pinned:hover {
    background-color: var(--accent-color, #ff0);
    border-color: var(--accent-color, #ff0);
    box-shadow: 0 0 10px var(--accent-color, #ff0);
}

/* ============================================================
   BUZZ BADGE (🔥)
   ============================================================ */

.badge-buzz {
    background-color: #ff4444;
    color: #ffffff;
    border-color: #ff4444;
    box-shadow: 0 0 5px #ff4444;
}

.badge-buzz:hover {
    background-color: #ff6666;
    border-color: #ff6666;
    box-shadow: 0 0 10px #ff6666;
}

/* ============================================================
   THREAT BADGE (⚠️)
   ============================================================ */

.badge-threat {
    background-color: var(--accent-color, #ff0);
    color: var(--bg-color, #000);
    border-color: var(--accent-color, #ff0);
    box-shadow: 0 0 5px var(--accent-color, #ff0);
}

.badge-threat:hover {
    background-color: #ffaa00;
    border-color: #ffaa00;
    box-shadow: 0 0 10px #ffaa00;
}

/* ============================================================
   IMPACT SCORE BADGE ([25.5])
   ============================================================ */

.badge-impact {
    background-color: var(--scanline, #333);
    color: var(--text-color, #0f0);
    border-color: var(--primary-color, #0ff);
    box-shadow: 0 0 3px var(--primary-color, #0ff);
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
}

.badge-impact:hover {
    background-color: var(--primary-color, #0ff);
    color: var(--bg-color, #000);
    box-shadow: 0 0 8px var(--primary-color, #0ff);
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

/* Mobile: Smaller badges, more compact */
@media (max-width: 768px) {
    .impact-badges {
        gap: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
        min-width: 18px;
        height: 18px;
    }

    .badge-impact {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
    }
}

/* Desktop: Larger badges, more spacing */
@media (min-width: 769px) {
    .impact-badges {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .badge {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
        min-width: 22px;
        height: 22px;
    }

    .badge-impact {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================================
   THEME INTEGRATION
   ============================================================ */

/* Matrix theme specific */
[data-theme="matrix"] .badge-pinned {
    background-color: #00ff00;
    color: #000000;
    border-color: #00ff00;
    box-shadow: 0 0 5px #00ff00;
}

[data-theme="matrix"] .badge-threat {
    background-color: #00ff00;
    color: #000000;
    border-color: #00ff00;
    box-shadow: 0 0 5px #00ff00;
}

[data-theme="matrix"] .badge-impact {
    background-color: #000000;
    color: #00ff00;
    border-color: #00ff00;
    box-shadow: 0 0 3px #00ff00;
}

/* Amber theme specific */
[data-theme="amber"] .badge-pinned {
    background-color: #ffaa00;
    color: #000000;
    border-color: #ffaa00;
    box-shadow: 0 0 5px #ffaa00;
}

[data-theme="amber"] .badge-threat {
    background-color: #ffaa00;
    color: #000000;
    border-color: #ffaa00;
    box-shadow: 0 0 5px #ffaa00;
}

[data-theme="amber"] .badge-impact {
    background-color: #000000;
    color: #ffaa00;
    border-color: #ffaa00;
    box-shadow: 0 0 3px #ffaa00;
}

/* White terminal theme specific */
[data-theme="white-terminal"] .badge-pinned {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 0 5px #ffffff;
}

[data-theme="white-terminal"] .badge-threat {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 0 5px #ffffff;
}

[data-theme="white-terminal"] .badge-impact {
    background-color: #000000;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 3px #ffffff;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* High contrast support */
@media (prefers-contrast: high) {
    .badge {
        border-width: 2px;
        font-weight: 900;
    }

    .badge-pinned {
        background-color: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }

    .badge-buzz {
        background-color: #ff0000;
        color: #ffffff;
        border-color: #ff0000;
    }

    .badge-threat {
        background-color: #ffff00;
        color: #000000;
        border-color: #ffff00;
    }

    .badge-impact {
        background-color: #000000;
        color: #ffffff;
        border-color: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .badge {
        transition: none;
    }

    .badge:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ============================================================
   ACTIVATION CLASSES
   ============================================================ */

/* When you're ready to show badges, add this class to body or container */
.show-badges .impact-badges {
    display: flex !important;
}

.show-badges .badge {
    display: inline-block !important;
}

/* ============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* GPU acceleration for smooth hover effects */
.badge {
    will-change: transform, box-shadow;
    transform: translateZ(0);
}

/* Optimize repaints */
.impact-badges {
    contain: layout style paint;
}

/* ============================================================
   DEBUG MODE (Optional)
   ============================================================ */

/* Uncomment to see badge positions during development */
/*
.debug-badges .impact-badges {
    display: flex !important;
    border: 1px dashed var(--primary-color, #0ff);
    background-color: rgba(0, 255, 255, 0.1);
}

.debug-badges .badge {
    display: inline-block !important;
    border: 1px dashed var(--accent-color, #ff0);
}
*/