/**
 * TVK Local Icons CSS
 * 
 * This file provides local icon fallbacks for all TVK plugins
 * No external dependencies - all icons stored locally
 * 
 * @package TVK_Manager
 * @version 3.4.0
 * @since 3.4.0
 */

/* ========================================================================
   TVK LOCAL ICONS - NO EXTERNAL DEPENDENCIES
   ======================================================================== */

/* Ensure Dashicons are loaded locally */
@font-face {
    font-family: 'dashicons';
    src: url('../fonts/dashicons.eot');
    src: url('../fonts/dashicons.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dashicons.woff') format('woff'),
         url('../fonts/dashicons.ttf') format('truetype'),
         url('../fonts/dashicons.svg#dashicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* TVK Icon Base Classes */
.tvk-icon {
    font-family: 'dashicons' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle;
}

/* TVK Icon Sizes */
.tvk-icon-xs { font-size: 12px; }
.tvk-icon-sm { font-size: 14px; }
.tvk-icon-md { font-size: 16px; }
.tvk-icon-lg { font-size: 20px; }
.tvk-icon-xl { font-size: 24px; }
.tvk-icon-xxl { font-size: 32px; }

/* TVK Icon Colors */
.tvk-icon-primary { color: #0073aa; }
.tvk-icon-success { color: #28a745; }
.tvk-icon-warning { color: #ffc107; }
.tvk-icon-danger { color: #dc3545; }
.tvk-icon-info { color: #17a2b8; }
.tvk-icon-secondary { color: #6c757d; }
.tvk-icon-light { color: #f8f9fa; }
.tvk-icon-dark { color: #343a40; }

/* ========================================================================
   TVK SPECIFIC ICONS - MAPPED TO DASHICONS
   ======================================================================== */

/* Main Menu Icons */
.tvk-icon-playlist-video::before { content: "\f126"; } /* dashicons-playlist-video */
.tvk-icon-video-alt3::before { content: "\f126"; } /* dashicons-video-alt3 */

/* User & Profile Icons */
.tvk-icon-admin-users::before { content: "\f110"; } /* dashicons-admin-users */
.tvk-icon-info::before { content: "\f348"; } /* dashicons-info */

/* Action Icons */
.tvk-icon-plus-alt::before { content: "\f502"; } /* dashicons-plus-alt */
.tvk-icon-upload::before { content: "\f317"; } /* dashicons-upload */
.tvk-icon-edit::before { content: "\f464"; } /* dashicons-edit */
.tvk-icon-trash::before { content: "\f182"; } /* dashicons-trash */

/* Media Icons */
.tvk-icon-controls-play::before { content: "\f522"; } /* dashicons-controls-play */
.tvk-icon-update::before { content: "\f463"; } /* dashicons-update */
.tvk-icon-warning::before { content: "\f534"; } /* dashicons-warning */

/* Navigation Icons */
.tvk-icon-arrow-down-alt2::before { content: "\f347"; } /* dashicons-arrow-down-alt2 */
.tvk-icon-arrow-up-alt2::before { content: "\f346"; } /* dashicons-arrow-up-alt2 */

/* ========================================================================
   TVK BUTTON ICONS - WITH STYLING
   ======================================================================== */

/* Channel Action Buttons */
.tvk-channel-btn .tvk-icon {
    margin-right: 8px;
    font-size: 16px;
}

.tvk-channel-playlist-btn .tvk-icon::before { content: "\f126"; }
.tvk-channel-profile-btn .tvk-icon::before { content: "\f110"; }
.tvk-channel-details-btn .tvk-icon::before { content: "\f348"; }

/* Video Addition Buttons */
.tvk-add-video-btn .tvk-icon {
    margin-right: 8px;
    font-size: 16px;
}

.tvk-quick-add-btn .tvk-icon::before { content: "\f502"; }
.tvk-single-add-btn .tvk-icon::before { content: "\f126"; }
.tvk-bulk-add-btn .tvk-icon::before { content: "\f317"; }

/* Video Player Icons */
.tvk-play-button .tvk-icon::before { content: "\f522"; }
.tvk-refresh-btn .tvk-icon::before { content: "\f463"; }

/* Modal Action Icons */
.tvk-edit-btn .tvk-icon::before { content: "\f464"; }
.tvk-delete-btn .tvk-icon::before { content: "\f182"; }
.tvk-warning-icon .tvk-icon::before { content: "\f534"; }

/* ========================================================================
   TVK FALLBACK ICONS - TEXT FALLBACKS
   ======================================================================== */

/* Fallback for when Dashicons fail to load */
.tvk-icon-fallback {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #0073aa;
    color: white;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
    margin-right: 8px;
}

.tvk-icon-fallback.playlist::before { content: "📺"; }
.tvk-icon-fallback.profile::before { content: "👤"; }
.tvk-icon-fallback.details::before { content: "ℹ"; }
.tvk-icon-fallback.add::before { content: "+"; }
.tvk-icon-fallback.upload::before { content: "⬆"; }
.tvk-icon-fallback.edit::before { content: "✏"; }
.tvk-icon-fallback.delete::before { content: "🗑"; }
.tvk-icon-fallback.play::before { content: "▶"; }
.tvk-icon-fallback.refresh::before { content: "🔄"; }
.tvk-icon-fallback.warning::before { content: "⚠"; }

/* ========================================================================
   TVK ICON UTILITIES
   ======================================================================== */

/* Icon with text */
.tvk-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Icon only (no text) */
.tvk-icon-only {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
}

/* Icon in button */
.tvk-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Icon in link */
.tvk-link-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* ========================================================================
   TVK ICON ANIMATIONS
   ======================================================================== */

/* Hover effects */
.tvk-icon:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Loading animation */
.tvk-icon-loading {
    animation: tvk-spin 1s linear infinite;
}

@keyframes tvk-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pulse animation */
.tvk-icon-pulse {
    animation: tvk-pulse 2s infinite;
}

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

/* ========================================================================
   TVK ICON RESPONSIVE
   ======================================================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
    .tvk-icon {
        font-size: 14px;
    }
    
    .tvk-icon-lg {
        font-size: 18px;
    }
    
    .tvk-icon-xl {
        font-size: 20px;
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .tvk-icon {
        font-size: 15px;
    }
}

/* ========================================================================
   TVK ICON ACCESSIBILITY
   ======================================================================== */

/* Screen reader only text */
.tvk-icon-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .tvk-icon {
        color: #000;
    }
    
    .tvk-icon-primary {
        color: #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .tvk-icon {
        animation: none;
        transition: none;
    }
    
    .tvk-icon:hover {
        transform: none;
    }
}

/* ========================================================================
   TVK ICON DEBUGGING
   ======================================================================== */

/* Debug mode - show icon codes */
.tvk-debug-icons .tvk-icon::after {
    content: attr(data-icon-code);
    font-size: 10px;
    color: #999;
    margin-left: 4px;
}

/* Icon loading indicator */
.tvk-icon-loading::before {
    content: "⏳";
    animation: tvk-spin 1s linear infinite;
}

/* Icon error indicator */
.tvk-icon-error::before {
    content: "❌";
    color: #dc3545;
}