/* ===================================
   ORACNOOS - Analytics Visual Elements
   Hotjar badge, tracking indicators
   =================================== */

/* Hotjar Badge (Auto-added by Hotjar) */
#_hj_feedback_container {
    z-index: 9995 !important;
}

/* Analytics Debug Panel (Dev Only) */
.analytics-debug {
    position: fixed;
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
    background: var(--card-bg);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    z-index: 9994;
    display: none; /* Hidden by default */
}

.analytics-debug.active {
    display: block;
}

.analytics-debug h4 {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.analytics-debug ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analytics-debug li {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
}

.analytics-debug li:last-child {
    border-bottom: none;
}

/* Event Flash (Visual Feedback for Tracked Events) */
.event-flash {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    z-index: 9999;
    animation: flashIn 0.3s ease, flashOut 0.3s ease 2s;
    pointer-events: none;
}

@keyframes flashIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flashOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Performance Badge */
.performance-badge {
    position: fixed;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--gradient-success);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    z-index: 9993;
    box-shadow: var(--shadow-md);
    display: none; /* Hidden by default */
}

.performance-badge.good {
    background: var(--gradient-success);
}

.performance-badge.medium {
    background: linear-gradient(135deg, #ffa500 0%, #ff8c00 100%);
}

.performance-badge.poor {
    background: linear-gradient(135deg, #ff4081 0%, #f50057 100%);
}

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

@media (max-width: 768px) {
    .analytics-debug {
        bottom: var(--spacing-sm);
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        font-size: 0.7rem;
    }
    
    .performance-badge,
    .event-flash {
        display: none; /* Hide on mobile */
    }
}

/* ===================================
   Print
   =================================== */

@media print {
    .analytics-debug,
    .performance-badge,
    .event-flash {
        display: none !important;
    }
}