/* Global Styles - Inter Font Family */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

/* Primary Color Gradient */
:root {
    --primary-gradient: linear-gradient(90deg, #2187CF 0.46%, #083F73 100.46%);
    --secondary-bg: radial-gradient(circle, #0a2233 0%, #000000 100%);
    --primary-start: #2187CF;
    --primary-end: #083F73;
    --secondary-start: #0a2233;
    --secondary-end: #000000;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure theme classes work on html element */
html.dark {
    color-scheme: dark;
}

html:not(.dark) {
    color-scheme: light;
}

/* Light Mode (Default) */
body.light-mode,
html:not(.dark) body {
    background-color: #f9fafb !important; /* bg-gray-50 */
    color: #111827; /* text-gray-900 */
}

body.light-mode .page-container {
    background-color: #f9fafb;
}

body.light-mode .card {
    background: radial-gradient(circle, #0a2233 0%, #000000 100%);
    color: #ffffff;
}

body.light-mode .card-title {
    color: #ffffff;
}

body.light-mode .card-text {
    color: #9ca3af; /* text-gray-400 */
}

/* Dark Mode */
body.dark-mode,
html.dark body,
.dark body {
    background-color: #111827 !important; /* bg-gray-900 */
    color: #f9fafb; /* text-gray-50 */
}

body.dark-mode .page-container {
    background-color: #111827;
}

body.dark-mode .card {
    background: radial-gradient(circle, #0a2233 0%, #000000 100%);
    color: #ffffff;
}

body.dark-mode .card-title {
    color: #ffffff;
}

body.dark-mode .card-text {
    color: #d1d5db; /* text-gray-300 */
}

/* Page Backgrounds */
body.light-mode .bg-page,
html:not(.dark) .bg-page,
.bg-gray-50:not(.dark *) {
    background-color: #f9fafb !important; /* bg-gray-50 */
}

body.dark-mode .bg-page,
html.dark .bg-page,
.dark .bg-gray-50 {
    background-color: #111827 !important; /* bg-gray-900 */
}

/* Update bg-gray-50 to bg-gray-900 in dark mode */
html.dark .bg-gray-50,
html.dark [class*="bg-gray-50"]:not(.sidebar-bg):not(.card):not([style*="radial-gradient"]) {
    background-color: #111827 !important;
}

html:not(.dark) .bg-gray-900:not(.sidebar-bg):not(.card):not([style*="radial-gradient"]) {
    background-color: #f9fafb !important;
}

/* Dark mode text colors */
html.dark .text-gray-900:not(.card *),
html.dark h1:not(.card *),
html.dark h2:not(.card *),
html.dark h3:not(.card *) {
    color: #f9fafb !important;
}

html.dark .text-gray-600:not(.card *),
html.dark .text-gray-700:not(.card *) {
    color: #9ca3af !important;
}

/* Light mode text colors */
html:not(.dark) .text-gray-900:not(.card *) {
    color: #111827 !important;
}

html:not(.dark) .text-gray-600:not(.card *) {
    color: #4b5563 !important;
}

/* Cards - Secondary Gradient (works in both themes) */
body.light-mode .bg-card-dark,
body.dark-mode .bg-card-dark {
    background: radial-gradient(circle, #0a2233 0%, #000000 100%) !important;
}

/* Text Colors */
body.light-mode .text-primary {
    color: #111827; /* text-gray-900 */
}

body.dark-mode .text-primary {
    color: #f9fafb; /* text-gray-50 */
}

body.light-mode .text-secondary {
    color: #4b5563; /* text-gray-600 */
}

body.dark-mode .text-secondary {
    color: #9ca3af; /* text-gray-400 */
}

/* Consistent Card Styles - Matching Download Page */
.video-card,
.playlist-card,
.subscription-card {
    background: radial-gradient(circle, #0a2233 0%, #000000 100%);
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: box-shadow 0.3s ease;
}

.video-card:hover,
.playlist-card:hover,
.subscription-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
}

.bg-primary-gradient {
    background: linear-gradient(90deg, #2187CF 0.46%, #083F73 100.46%) !important;
}

.bg-secondary-gradient {
    background: radial-gradient(circle, #0a2233 0%, #000000 100%) !important;
}

/* Toggle switch checked state with primary gradient */
input[type="checkbox"]:checked + div[class*="peer"] {
    background: linear-gradient(90deg, #2187CF 0.46%, #083F73 100.46%) !important;
}

/* Card background using secondary gradient */
.bg-card-secondary {
    background: radial-gradient(circle, #0a2233 0%, #000000 100%) !important;
}

/* Consistent Button Styles */
.btn-primary {
    background: linear-gradient(90deg, #2187CF 0.46%, #083F73 100.46%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: none;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: #374151; /* bg-gray-700 */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover {
    background-color: #4b5563; /* bg-gray-600 */
}

/* Focus styles */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #2187CF;
    outline: none;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Active Navigation Item */
.nav-active {
    background: linear-gradient(90deg, #2187CF 0.46%, #083F73 100.46%) !important;
    color: white !important;
}

/* Sidebar Background */
.sidebar-bg {
    background: radial-gradient(circle, #0a2233 0%, #000000 100%);
}

/* Toggle Switch - Primary Gradient */
.toggle-switch:checked + .toggle-slider {
    background: linear-gradient(90deg, #2187CF 0.46%, #083F73 100.46%) !important;
}

/* Primary Color for Text/Links */
.text-primary-color {
    color: #2187CF;
}

.text-primary-color:hover {
    color: #083F73;
}

/* ============================================
   RESPONSIVE DESIGN - Mobile, Tablet, Desktop
   ============================================ */

/* Mobile First Approach */
/* Base styles are for mobile (< 640px) */

/* Ensure all modals are responsive - only apply to modal content, not backdrop container */
.modal,
[id*="Modal"] > div:first-child:not([id*="Dropdown"]):not([id*="Menu"]),
[id*="modal"] > div:first-child:not([id*="dropdown"]):not([id*="menu"]) {
    max-width: calc(100vw - 2rem);
    margin: 1rem;
}

@media (min-width: 640px) {
    .modal,
    [id*="Modal"] > div:first-child:not([id*="Dropdown"]):not([id*="Menu"]),
    [id*="modal"] > div:first-child:not([id*="dropdown"]):not([id*="menu"]) {
        max-width: 28rem;
        margin: auto;
    }
}

/* Ensure dropdowns don't overflow on mobile */
.dropdown-menu,
[id*="Dropdown"],
[id*="dropdown"],
[id*="Menu"],
[id*="menu"] {
    max-width: calc(100vw - 2rem);
    overflow-x: hidden;
}

/* Prevent text overflow on mobile */
.text-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive button groups */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive video containers */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container video,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Mobile: < 640px */
@media (max-width: 639px) {
    /* Sidebar - Hidden on mobile, show as overlay */
    .sidebar-mobile-hidden {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar-mobile-visible {
        transform: translateX(0);
    }
    
    /* Main content full width on mobile */
    .main-content-mobile {
        width: 100%;
    }
    
    /* Grid adjustments */
    .grid-responsive {
        grid-template-columns: 1fr !important;
    }
    
    /* Text sizes */
    h1 {
        font-size: 1.75rem !important; /* 28px */
    }
    
    h2 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    /* Padding adjustments */
    .page-padding {
        padding: 1rem !important;
    }
    
    /* Card spacing */
    .card-grid {
        gap: 1rem !important;
    }
    
    /* Hide some elements on mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* Tablet: 640px - 1023px */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Sidebar - Can be visible or collapsible */
    .sidebar-tablet {
        width: 200px;
    }
    
    /* Grid - 2 columns on tablet */
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Text sizes */
    h1 {
        font-size: 2rem !important; /* 32px */
    }
    
    h2 {
        font-size: 1.75rem !important; /* 28px */
    }
    
    /* Padding adjustments */
    .page-padding {
        padding: 1.5rem !important;
    }
    
    /* Card spacing */
    .card-grid {
        gap: 1.5rem !important;
    }
}

/* Desktop: >= 1024px */
@media (min-width: 1024px) {
    /* Full sidebar */
    .sidebar-desktop {
        width: 256px; /* w-64 */
    }
    
    /* Grid - 3-4 columns on desktop */
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Large desktop: 4 columns */
    @media (min-width: 1280px) {
        .grid-responsive {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    
    /* Text sizes */
    h1 {
        font-size: 2.25rem !important; /* 36px */
    }
    
    h2 {
        font-size: 1.875rem !important; /* 30px */
    }
    
    /* Padding adjustments */
    .page-padding {
        padding: 2rem !important;
    }
    
    /* Card spacing */
    .card-grid {
        gap: 1.5rem !important;
    }
}

/* Common Responsive Utilities */
.responsive-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .responsive-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .responsive-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive Video Cards */
.video-card-responsive {
    width: 100%;
}

@media (min-width: 640px) {
    .video-card-responsive {
        max-width: calc(50% - 0.75rem);
    }
}

@media (min-width: 1024px) {
    .video-card-responsive {
        max-width: calc(25% - 1.125rem);
    }
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: block;
    }
}

/* Responsive Text */
.text-responsive {
    font-size: 0.875rem; /* 14px mobile */
}

@media (min-width: 640px) {
    .text-responsive {
        font-size: 1rem; /* 16px tablet */
    }
}

@media (min-width: 1024px) {
    .text-responsive {
        font-size: 1.125rem; /* 18px desktop */
    }
}

/* ============================================
   DARK MODE - BUTTONS AND TEXT COLORS
   ============================================ */

/* Dark mode button text colors */
html.dark button:not(.btn-primary):not([style*="gradient"]),
html.dark .btn-secondary {
    color: #e5e7eb !important; /* text-gray-200 */
}

html.dark button.bg-gray-200,
html.dark .bg-gray-200 {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #e5e7eb !important; /* text-gray-200 */
}

html.dark button.bg-gray-200:hover,
html.dark .bg-gray-200:hover {
    background-color: #4b5563 !important; /* bg-gray-600 */
}

/* Dark mode input fields */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark textarea,
html.dark select {
    background-color: #374151 !important; /* bg-gray-700 */
    border-color: #4b5563 !important; /* border-gray-600 */
    color: #f9fafb !important; /* text-white */
}

html.dark input[type="text"]::placeholder,
html.dark input[type="email"]::placeholder,
html.dark input[type="password"]::placeholder,
html.dark input[type="search"]::placeholder,
html.dark textarea::placeholder {
    color: #9ca3af !important; /* text-gray-400 */
}

/* Dark mode modal backgrounds */
html.dark .bg-white:not(.card):not([style*="gradient"]) {
    background-color: #1f2937 !important; /* bg-gray-800 */
}

/* Dark mode labels */
html.dark label,
html.dark .text-gray-700:not(.card *) {
    color: #d1d5db !important; /* text-gray-300 */
}

/* Dark mode headings in modals and forms */
html.dark h2:not(.card *),
html.dark h3:not(.card *) {
    color: #f9fafb !important; /* text-white */
}

/* Dark mode close buttons */
html.dark .text-gray-400:hover {
    color: #d1d5db !important; /* text-gray-300 */
}

/* Dark mode dropdown menus */
html.dark .bg-white.border-gray-200,
html.dark [class*="bg-white"][class*="border"]:not(.card):not([style*="gradient"]) {
    background-color: #1f2937 !important; /* bg-gray-800 */
    border-color: #374151 !important; /* border-gray-700 */
}

html.dark .bg-white.border-gray-200 a,
html.dark .bg-white.border-gray-200 button {
    color: #e5e7eb !important; /* text-gray-200 */
}

html.dark .bg-white.border-gray-200 a:hover,
html.dark .bg-white.border-gray-200 button:hover {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #f9fafb !important; /* text-white */
}

/* Dark mode empty states */
html.dark .text-gray-300:not(.card *) {
    color: #d1d5db !important; /* text-gray-300 */
}

html.dark .text-gray-400:not(.card *) {
    color: #9ca3af !important; /* text-gray-400 */
}

html.dark .text-gray-500:not(.card *) {
    color: #6b7280 !important; /* text-gray-500 */
}

html.dark .text-gray-600:not(.card *) {
    color: #9ca3af !important; /* text-gray-400 */
}

/* Dark mode icons in buttons */
html.dark button .fas,
html.dark button .far,
html.dark button .fa {
    color: inherit;
}

/* Dark mode filter buttons */
html.dark button.rounded-full.bg-gray-200 {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #e5e7eb !important; /* text-gray-200 */
}

html.dark button.rounded-full.bg-gray-200:hover {
    background-color: #4b5563 !important; /* bg-gray-600 */
}

/* Dark mode search inputs */
html.dark input[type="search"],
html.dark input[placeholder*="Search"] {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #f9fafb !important; /* text-white */
    border-color: #4b5563 !important; /* border-gray-600 */
}

/* Dark mode right sidebar */
html.dark .w-64.bg-white {
    background-color: #1f2937 !important; /* bg-gray-800 */
}

/* Ensure all text in dark mode is visible */
html.dark p:not(.card *),
html.dark span:not(.card *),
html.dark div:not(.card *):not([style*="gradient"]) {
    color: inherit;
}

/* Dark mode specific text color overrides */
html.dark .text-gray-900:not(.card *) {
    color: #f9fafb !important; /* text-white */
}

html.dark .text-gray-800:not(.card *) {
    color: #e5e7eb !important; /* text-gray-200 */
}

html.dark .text-gray-700:not(.card *) {
    color: #d1d5db !important; /* text-gray-300 */
}

/* ============================================
   GLOBAL MODAL BACKDROP FIXES
   ============================================ */

/* Hide modal when hidden class is present - MUST be first to ensure proper hiding */
[id*="Modal"].hidden:not([id*="Dropdown"]):not([id*="Menu"]),
[id*="modal"].hidden:not([id*="dropdown"]):not([id*="menu"]) {
    display: none !important;
}

/* Modal backdrop - minimal fixes, let Tailwind handle most styling */
[id*="Modal"]:not(.hidden):not([id*="Dropdown"]):not([id*="Menu"]),
[id*="modal"]:not(.hidden):not([id*="dropdown"]):not([id*="menu"]) {
    /* Only ensure z-index is high enough - don't override Tailwind classes */
    z-index: 9999 !important;
}

/* Modal content - ensure it's above backdrop */
[id*="Modal"]:not(.hidden) > div:first-child:not([id*="Dropdown"]):not([id*="Menu"]),
[id*="modal"]:not(.hidden) > div:first-child:not([id*="dropdown"]):not([id*="menu"]) {
    position: relative;
    z-index: 10000;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
}

/* ============================================
   SWEETALERT2 DARK MODE STYLES
   ============================================ */

/* Dark mode SweetAlert2 popup */
html.dark .swal2-popup,
html.dark .swal2-dark {
    background-color: #1f2937 !important; /* bg-gray-800 */
    color: #f3f4f6 !important; /* text-gray-100 */
}

/* Dark mode SweetAlert2 title */
html.dark .swal2-title,
html.dark .swal2-title-dark {
    color: #ffffff !important; /* text-white */
}

/* Dark mode SweetAlert2 content text */
html.dark .swal2-html-container,
html.dark .swal2-html-dark,
html.dark .swal2-content {
    color: #d1d5db !important; /* text-gray-300 */
}

/* Dark mode SweetAlert2 confirm button */
html.dark .swal2-confirm,
html.dark .swal2-confirm-dark {
    background-color: #2187CF !important;
    color: #ffffff !important;
    border: none !important;
}

html.dark .swal2-confirm:hover,
html.dark .swal2-confirm-dark:hover {
    background-color: #083F73 !important;
    opacity: 0.9;
}

/* Dark mode SweetAlert2 cancel button */
html.dark .swal2-cancel,
html.dark .swal2-cancel-dark {
    background-color: #6b7280 !important; /* bg-gray-500 */
    color: #ffffff !important;
    border: none !important;
}

html.dark .swal2-cancel:hover,
html.dark .swal2-cancel-dark:hover {
    background-color: #4b5563 !important; /* bg-gray-600 */
}

/* Dark mode SweetAlert2 backdrop */
html.dark .swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Dark mode SweetAlert2 icons */
html.dark .swal2-icon {
    border-color: #374151 !important; /* border-gray-700 */
}

html.dark .swal2-icon.swal2-success {
    border-color: #10b981 !important; /* border-green-500 */
    color: #10b981 !important;
}

html.dark .swal2-icon.swal2-error {
    border-color: #dc2626 !important; /* border-red-600 */
    color: #dc2626 !important;
}

html.dark .swal2-icon.swal2-warning {
    border-color: #f59e0b !important; /* border-amber-500 */
    color: #f59e0b !important;
}

html.dark .swal2-icon.swal2-info {
    border-color: #2187CF !important;
    color: #2187CF !important;
}

html.dark .swal2-icon.swal2-question {
    border-color: #2187CF !important;
    color: #2187CF !important;
}

/* Dark mode SweetAlert2 progress bar */
html.dark .swal2-timer-progress-bar {
    background-color: #2187CF !important;
}

/* Ensure all SweetAlert2 text is visible in dark mode */
html.dark .swal2-popup * {
    color: inherit;
}

html.dark .swal2-popup p,
html.dark .swal2-popup span:not(.swal2-icon-content) {
    color: #d1d5db !important; /* text-gray-300 */
}