/* Site-wide Contrast Fixes */
/* MANDATORY DESIGN RULE: Dark background = light font (#ffffff), Light background = dark font (#000000) */

/* Universal Contrast System */
/* Dark backgrounds - force white text */
[style*="background: #"], 
[style*="background:#"],
[style*="background-color: #"],
[style*="background-color:#"],
div[style*="background: linear-gradient"],
div[style*="background:linear-gradient"],
.dark-bg,
.gradient-bg {
    color: #ffffff !important;
}

/* Light backgrounds - force dark text */
[style*="background: #fff"],
[style*="background: #FFF"], 
[style*="background: #f"],
[style*="background-color: #fff"],
[style*="background-color: #FFF"],
[style*="background-color: #f"],
.light-bg,
.white-bg {
    color: #000000 !important;
}

/* Contrast Utility Classes */
.text-dark-bg { color: #ffffff !important; } /* White text for dark backgrounds */
.text-light-bg { color: #000000 !important; } /* Black text for light backgrounds */
.text-high-contrast { color: #000000 !important; } /* Maximum contrast black */
.text-high-contrast-white { color: #ffffff !important; } /* Maximum contrast white */

/* Auto-detect common dark color backgrounds */
[style*="background: #0"], 
[style*="background: #1"], 
[style*="background: #2"], 
[style*="background: #3"], 
[style*="background: #4"], 
[style*="background: #5"], 
[style*="background: #6"], 
[style*="background: #7"],
[style*="background-color: #0"], 
[style*="background-color: #1"], 
[style*="background-color: #2"], 
[style*="background-color: #3"], 
[style*="background-color: #4"], 
[style*="background-color: #5"], 
[style*="background-color: #6"], 
[style*="background-color: #7"] {
    color: #ffffff !important;
}

/* Auto-detect common light color backgrounds */
[style*="background: #8"], 
[style*="background: #9"], 
[style*="background: #a"], 
[style*="background: #A"], 
[style*="background: #b"], 
[style*="background: #B"], 
[style*="background: #c"], 
[style*="background: #C"], 
[style*="background: #d"], 
[style*="background: #D"], 
[style*="background: #e"], 
[style*="background: #E"],
[style*="background-color: #8"], 
[style*="background-color: #9"], 
[style*="background-color: #a"], 
[style*="background-color: #A"], 
[style*="background-color: #b"], 
[style*="background-color: #B"], 
[style*="background-color: #c"], 
[style*="background-color: #C"], 
[style*="background-color: #d"], 
[style*="background-color: #D"], 
[style*="background-color: #e"], 
[style*="background-color: #E"] {
    color: #000000 !important;
}

/* Override problematic inline styles for better contrast */

/* Generic text color fixes */
[style*="color: #333"] {
    color: var(--text-high-contrast) !important;
}

[style*="color: #666"] {
    color: var(--text-medium-contrast) !important;
}

[style*="color: #999"] {
    color: var(--text-low-contrast) !important;
}

[style*="color:#333"] {
    color: var(--text-high-contrast) !important;
}

[style*="color:#666"] {
    color: var(--text-medium-contrast) !important;
}

[style*="color:#999"] {
    color: var(--text-low-contrast) !important;
}

/* Specific component fixes */

/* Card titles should be high contrast */
.component-card-title,
.kss-card-title,
.premium-lesson-title {
    color: var(--text-high-contrast) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--weight-bold) !important;
}

/* White text on colored backgrounds */
.component-card-header *,
.kss-card-header *,
.premium-header * {
    color: var(--text-white-force) !important;
}

/* Table headers */
.component-table th,
.kss-table th,
table th {
    color: var(--text-high-contrast) !important;
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
}

/* Table data */
.component-table td,
.kss-table td,
table td {
    color: var(--text-medium-contrast) !important;
    font-family: var(--font-body) !important;
}

/* Form labels */
label,
.kss-form-label,
.component-form-label {
    color: var(--text-high-contrast) !important;
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
}

/* Body text in cards and content areas */
.component-card-content p,
.kss-card-content p,
.main-content p {
    color: var(--text-medium-contrast) !important;
    font-family: var(--font-body) !important;
}

/* Links should be accessible */
a {
    color: var(--text-link) !important;
}

a:hover {
    color: var(--text-link-hover) !important;
}

/* Button text contrast */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
button[type="submit"],
input[type="submit"] {
    color: var(--text-on-dark) !important;
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
}

.btn-secondary {
    background: #6c757d !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
}

.btn-secondary:hover {
    background: #545b62 !important;
    color: #ffffff !important;
    border-color: #545b62 !important;
}

/* Navigation text */
header nav a,
.dropdown-content a {
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
}

/* Header navigation contrast fixes */
header nav ul li a {
    color: var(--text-on-dark) !important;
}

header nav ul li a:hover {
    color: #ffffff !important;
}

/* Premium video platform fixes */
.premium-lesson-container {
    color: var(--text-medium-contrast) !important;
}

.premium-lesson-container h1,
.premium-lesson-container h2,
.premium-lesson-container h3 {
    color: var(--text-high-contrast) !important;
    font-family: var(--font-display) !important;
}

.premium-tablink {
    color: var(--text-on-dark) !important;
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
}

.premium-tablink.active {
    color: var(--text-on-dark) !important;
}

.premium-tabcontent {
    color: var(--text-on-dark) !important;
    font-family: var(--font-body) !important;
}

.premium-tabcontent h3,
.premium-tabcontent h4 {
    color: var(--text-on-dark) !important;
    font-family: var(--font-display) !important;
}

/* Success/Error message contrast */
.success-message {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.error-message {
    background: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

/* Info message contrast */
.info-message {
    background: #e7f3ff !important;
    color: #0066cc !important;
    border: 1px solid #b3d9ff !important;
}

/* Warning message contrast */
.warning-message {
    background: #fff3cd !important;
    color: #856404 !important;
    border: 1px solid #ffeeba !important;
}

/* Email template specific fixes */
.template-card h4 {
    color: var(--text-link) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
}

.template-editor h3 {
    color: var(--text-link) !important;
    font-family: var(--font-display) !important;
}

/* Lesson grid and tiles */
.lesson-title,
.premium-lesson-title {
    color: var(--text-high-contrast) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
}

/* Premium lesson titles - ensure high contrast */
.premium-lesson-title.lesson-title,
div.premium-lesson-title,
.lesson-title.premium-lesson-title {
    color: #ffffff !important;
    font-family: var(--font-display) !important;
    font-weight: var(--weight-bold) !important;
    text-shadow: 0 0.1vw 0.3vw rgba(0,0,0,0.7) !important;
    min-height: fit-content !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 0.8vw !important;
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Premium related items - ensure white text on dark backgrounds */
.premium-related-item,
.premium-related-item h1,
.premium-related-item h2,
.premium-related-item h3,
.premium-related-item h4,
.premium-related-item h5,
.premium-related-item h6,
.premium-related-item p,
.premium-related-item span,
.premium-related-item div,
.premium-related-item a {
    color: #ffffff !important;
    font-family: var(--font-body) !important;
}

.premium-related-item h4 {
    font-family: var(--font-display) !important;
    font-weight: var(--weight-semibold) !important;
}

/* Dashboard and statistics */
.stat-card *,
.dashboard-card * {
    color: var(--text-on-dark) !important;
    font-family: var(--font-ui) !important;
}

/* Modal content */
.modal-content,
.popup-content {
    color: var(--text-medium-contrast) !important;
    font-family: var(--font-body) !important;
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.popup-content h1,
.popup-content h2,
.popup-content h3 {
    color: var(--text-high-contrast) !important;
    font-family: var(--font-display) !important;
}

/* Search and filter forms */
.search-container input,
.search-container select {
    color: var(--text-high-contrast) !important;
    font-family: var(--font-body) !important;
}

/* Breadcrumbs and navigation */
.breadcrumb,
.nav-breadcrumb {
    color: var(--text-medium-contrast) !important;
    font-family: var(--font-ui) !important;
}

/* Status indicators */
.status-active {
    color: #28a745 !important;
    font-weight: var(--weight-semibold) !important;
}

.status-inactive {
    color: #dc3545 !important;
    font-weight: var(--weight-semibold) !important;
}

.status-pending {
    color: #c8900e !important;
    font-weight: var(--weight-semibold) !important;
}

/* Ensure high contrast on all content areas */
.content-wrapper,
.main-content,
.component-container,
.kss-container {
    color: var(--text-medium-contrast) !important;
}

/* Force proper font families */
* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* CRITICAL SECURITY: Disable video downloads and right-click */
video {
    pointer-events: none !important;
}

video::-webkit-media-controls-download-button {
    display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

video {
    pointer-events: auto !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Disable dragging of video elements */
video {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
}

/* Responsive text size adjustments */
@media (max-width: 768px) {
    .premium-lesson-title {
        color: var(--text-high-contrast) !important;
    }
    
    /* Ensure mobile text is still high contrast */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-high-contrast) !important;
    }
    
    p, div, span {
        color: var(--text-medium-contrast) !important;
    }
}

/* Dark theme specific overrides for lesson pages */
.premium-lesson-container.dark-theme {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

.premium-lesson-container.dark-theme * {
    color: var(--text-on-dark) !important;
}

.premium-lesson-container.dark-theme h1,
.premium-lesson-container.dark-theme h2,
.premium-lesson-container.dark-theme h3 {
    color: var(--text-on-dark) !important;
}

/* Video player descriptions and meta */
.premium-video-description,
.video-description {
    color: var(--text-on-dark) !important;
    font-family: var(--font-body) !important;
}

/* Lesson meta information */
.lesson-meta,
.lesson-details {
    color: var(--text-medium-contrast) !important;
    font-family: var(--font-body) !important;
}

/* Footer specific enhancements */
footer p {
    color: var(--text-on-dark) !important;
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-medium) !important;
}

/* Ensure no transparent text anywhere */
*[style*="transparent"],
*[style*="-webkit-text-fill-color"] {
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* Fix h1 contrast on gradient backgrounds */
.video-platform-hero h1,
h1[style*="text-shadow"] {
    color: #ffffff !important;
    text-shadow: 0 0.1vw 0.3vw rgba(0,0,0,0.7) !important;
    font-family: var(--font-display) !important;
    font-weight: var(--weight-bold) !important;
}

/* Fix paragraph contrast on gradient backgrounds */
.video-platform-hero p,
p[style*="opacity: 0.9"],
p[style*="opacity:0.9"],
div[style*="background: linear-gradient"] p {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 0.05vw 0.2vw rgba(0,0,0,0.5) !important;
    font-family: var(--font-body) !important;
}/* ====== ADDITIONAL PREMIUM LESSON TITLE HEIGHT FIXES ====== */
/* Mobile specific adjustments for lesson titles */
@media (max-width: 768px) {
    .premium-lesson-title,
    .premium-lesson-title.lesson-title,
    div.premium-lesson-title,
    .lesson-title.premium-lesson-title {
        padding: 16px !important;
        line-height: 1.5 !important;
        font-size: 18px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Tablet specific adjustments */  
@media (min-width: 769px) and (max-width: 1024px) {
    .premium-lesson-title,
    .premium-lesson-title.lesson-title,
    div.premium-lesson-title,
    .lesson-title.premium-lesson-title {
        padding: 20px !important;
        line-height: 1.4 !important;
        font-size: 20px !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Desktop specific adjustments */
@media (min-width: 1025px) {
    .premium-lesson-title,
    .premium-lesson-title.lesson-title,
    div.premium-lesson-title,
    .lesson-title.premium-lesson-title {
        padding: 1.2vw !important;
        line-height: 1.3 !important;
        min-height: 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}/* ====== RELATED INFO TAB VIDEO CONTAINER FIXES ====== */
/* Premium embedded video containers in Related Info tab */
.premium-embedded-video-container,
#RelatedInfo .premium-embedded-video-container,
#RelatedInfo .embedded-video-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Video elements within Related Info containers */
#RelatedInfo .premium-embedded-video-container video,
#RelatedInfo .embedded-video-container video,
#RelatedInfo .premium-embedded-video-container iframe,
#RelatedInfo .embedded-video-container iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border: none !important;
    border-radius: 8px !important;
    background: #000 !important;
    object-fit: contain !important;
}

/* Video thumbnail containers in Related Info */
#RelatedInfo .video-thumbnail-container,
#RelatedInfo div[id^="thumbnail-videoitem-"] {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease !important;
}

#RelatedInfo .video-thumbnail-container:hover,
#RelatedInfo div[id^="thumbnail-videoitem-"]:hover {
    transform: scale(1.02) !important;
}

/* Play button overlay in Related Info videos */
#RelatedInfo .other_video_thumbnail,
#RelatedInfo .video-thumbnail-overlay {
    width: 60px !important;
    height: 60px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.9 !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) !important;
    transition: opacity 0.2s ease !important;
}

#RelatedInfo .video-thumbnail-container:hover .other_video_thumbnail,
#RelatedInfo div[id^="thumbnail-videoitem-"]:hover .video-thumbnail-overlay {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Hide video initially in Related Info */
#RelatedInfo .video-player-hidden {
    display: none !important;
}

/* Show video when active in Related Info */
#RelatedInfo video.video-active {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
}

/* Mobile specific adjustments for Related Info videos */
@media (max-width: 768px) {
    #RelatedInfo .premium-embedded-video-container,
    #RelatedInfo .embedded-video-container {
        margin-bottom: 16px !important;
        border-radius: 6px !important;
    }
    
    #RelatedInfo .other_video_thumbnail,
    #RelatedInfo .video-thumbnail-overlay {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Tablet specific adjustments for Related Info videos */
@media (min-width: 769px) and (max-width: 1024px) {
    #RelatedInfo .premium-embedded-video-container,
    #RelatedInfo .embedded-video-container {
        margin-bottom: 18px !important;
    }
    
    #RelatedInfo .other_video_thumbnail,
    #RelatedInfo .video-thumbnail-overlay {
        width: 55px !important;
        height: 55px !important;
    }
}

/* Ensure embedded iframe videos in Related Info are properly sized */
#RelatedInfo .premium-embedded-video-container iframe[src*="youtube"],
#RelatedInfo .premium-embedded-video-container iframe[src*="vimeo"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border: none !important;
    border-radius: 8px !important;
}