/**
 * Video Player Debug CSS
 * Add class "debug-video-player" to body to enable debug mode
 */

/* ===== DEBUG MODE STYLES ===== */
.debug-video-player .jwplayer-container,
.debug-video-player [data-jwplayer-container],
.debug-video-player [data-enhanced-player] {
    border: 3px solid red !important;
    position: relative !important;
}

.debug-video-player .jwplayer-container::before,
.debug-video-player [data-jwplayer-container]::before,
.debug-video-player [data-enhanced-player]::before {
    content: "Video Container: " attr(style);
    position: absolute !important;
    top: -25px !important;
    left: 0 !important;
    background: red !important;
    color: white !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    z-index: 1000 !important;
    white-space: nowrap !important;
    max-width: 300px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.debug-video-player div[id^="jwplayer-"] {
    border: 3px solid blue !important;
    position: relative !important;
}

.debug-video-player div[id^="jwplayer-"]::before {
    content: "JWPlayer Instance: " attr(id);
    position: absolute !important;
    top: -25px !important;
    right: 0 !important;
    background: blue !important;
    color: white !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    z-index: 1000 !important;
}

.debug-video-player .jwplayer {
    border: 3px solid green !important;
    position: relative !important;
}

.debug-video-player .jwplayer::before {
    content: "JWPlayer Element";
    position: absolute !important;
    bottom: -25px !important;
    left: 0 !important;
    background: green !important;
    color: white !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    z-index: 1000 !important;
}

.debug-video-player video,
.debug-video-player iframe {
    border: 3px solid orange !important;
    position: relative !important;
}

.debug-video-player video::before,
.debug-video-player iframe::before {
    content: "Media Element";
    position: absolute !important;
    bottom: -25px !important;
    right: 0 !important;
    background: orange !important;
    color: white !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    z-index: 1000 !important;
}

.debug-video-player .bg-theme-secondary.rounded-xl {
    border: 3px solid purple !important;
    position: relative !important;
}

.debug-video-player .bg-theme-secondary.rounded-xl::before {
    content: "Parent Container";
    position: absolute !important;
    top: -25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: purple !important;
    color: white !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    z-index: 1000 !important;
}

/* ===== DEBUG INFO OVERLAY ===== */
.debug-video-player::before {
    content: "🐛 VIDEO PLAYER DEBUG MODE ACTIVE";
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(255, 0, 0, 0.9) !important;
    color: white !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ===== DEBUG CONSOLE STYLES ===== */
.debug-video-player .debug-console {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: #00ff00 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    max-width: 400px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    border: 2px solid #00ff00 !important;
}

.debug-video-player .debug-console h4 {
    color: #ffff00 !important;
    margin: 0 0 10px 0 !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.debug-video-player .debug-console .debug-item {
    margin-bottom: 8px !important;
    padding: 5px !important;
    border-left: 3px solid #00ff00 !important;
    padding-left: 10px !important;
}

.debug-video-player .debug-console .debug-item.error {
    border-left-color: #ff0000 !important;
    color: #ff6666 !important;
}

.debug-video-player .debug-console .debug-item.warning {
    border-left-color: #ffaa00 !important;
    color: #ffcc66 !important;
}

/* ===== MEASUREMENT OVERLAYS ===== */
.debug-video-player .jwplayer-container::after,
.debug-video-player [data-jwplayer-container]::after,
.debug-video-player [data-enhanced-player]::after {
    content: attr(data-debug-dimensions);
    position: absolute !important;
    bottom: 5px !important;
    left: 5px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 5px 10px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-family: monospace !important;
    z-index: 1001 !important;
}

/* ===== VIEWPORT INDICATORS ===== */
.debug-video-player::after {
    content: "Viewport: " attr(data-viewport-size);
    position: fixed !important;
    top: 50px !important;
    right: 10px !important;
    background: rgba(0, 0, 255, 0.9) !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-family: monospace !important;
    z-index: 9999 !important;
}

/* ===== CRITICAL SIZE VIOLATIONS ===== */
.debug-video-player .size-violation {
    animation: flash-red 1s infinite !important;
    border: 5px solid red !important;
}

@keyframes flash-red {
    0%, 50% { border-color: red; background-color: rgba(255, 0, 0, 0.1); }
    51%, 100% { border-color: darkred; background-color: rgba(139, 0, 0, 0.1); }
}

/* ===== RESPONSIVE DEBUG INDICATORS ===== */
@media (max-width: 768px) {
    .debug-video-player::before {
        content: "🐛 DEBUG MODE - TABLET/MOBILE";
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 480px) {
    .debug-video-player::before {
        content: "🐛 DEBUG - MOBILE";
        font-size: 11px !important;
        padding: 6px 10px !important;
        top: 5px !important;
        right: 5px !important;
    }
    
    .debug-video-player .debug-console {
        bottom: 5px !important;
        left: 5px !important;
        max-width: calc(100vw - 20px) !important;
        font-size: 10px !important;
    }
}

/* ===== UTILITY CLASSES ===== */
.debug-video-player .highlight-container {
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.5) !important;
    background-color: rgba(255, 255, 0, 0.1) !important;
}

.debug-video-player .highlight-oversized {
    box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.8) !important;
    background-color: rgba(255, 0, 0, 0.2) !important;
}

.debug-video-player .highlight-correct-size {
    box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.5) !important;
    background-color: rgba(0, 255, 0, 0.1) !important;
}

/* ===== TOGGLE BUTTON ===== */
.debug-toggle-btn {
    position: fixed !important;
    top: 100px !important;
    right: 10px !important;
    background: #333 !important;
    color: white !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    z-index: 9999 !important;
    transition: all 0.3s ease !important;
}

.debug-toggle-btn:hover {
    background: #555 !important;
    transform: scale(1.05) !important;
}

.debug-toggle-btn.active {
    background: #ff0000 !important;
}

/* ===== HIDE DEBUG IN PRODUCTION ===== */
.production .debug-video-player,
.production .debug-toggle-btn {
    display: none !important;
}