/* Global Theme System for Pro Courses Platform */

:root {
    /* Primary Theme Colors - Teal (#00AEAF) and White */
--primary-color: #00AEAF;
--primary-light: #33bfc0;
--primary-dark: #008a8b;
--accent-color: #ffffff;

/* Background Colors */
--bg-primary: #f8fafc;
--bg-secondary: #e2e8f0;
--bg-tertiary: #f1f5f9;
--bg-quaternary: #ffffff;
--bg-card: #ffffff;
--bg-section: #f9fafb;

/* Navigation */
--nav-bg: rgba(255, 255, 255, 0.9);
--nav-border: rgba(255, 255, 255, 0.2);
--mobile-menu-bg: rgba(255, 255, 255, 0.95);

/* Text Colors */
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-muted: #9ca3af;
--text-light: #f9fafb;
--text-heading: #111827;

/* UI Elements */
--logo-bg: #ffffff;
--logo-border: #f3f4f6;
--hover-bg: #f9fafb;
--dropdown-bg: #ffffff;
--dropdown-border: #e5e7eb;
--border-color: #e5e7eb;
--shadow-color: rgba(0, 0, 0, 0.1);
--shadow-light: rgba(0, 0, 0, 0.05);

/* Form Elements */
--input-bg: #ffffff;
--input-border: #d1d5db;
--input-focus: #3b82f6;
--button-bg: #ffffff;
--button-border: #d1d5db;

/* Cards & Components */
--card-bg: #ffffff;
--card-border: #e5e7eb;
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--hero-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Dashboard Specific */
--sidebar-bg: #ffffff;
--sidebar-border: #e5e7eb;
--sidebar-hover: #f9fafb;
--content-bg: #f8fafc;
}

[data-theme="dark"] {
:focus-visible {
border: 0px solid #333 !important;
border-top-color: rgb(51, 51, 51);
border-right-color: rgb(51, 51, 51);
border-bottom-color: rgb(51, 51, 51);
border-left-color: rgb(51, 51, 51);
outline: 1px solid #3080b0;
}
/* Background Colors */
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--bg-quaternary: #1e293b;
--bg-card: #1e293b;
--bg-section: #0f172a;

/* Navigation */
--nav-bg: rgba(23, 50, 115, 0.9);
--nav-border: rgba(30, 41, 59, 0.3);
--mobile-menu-bg: rgba(15, 23, 42, 0.95);

/* Text Colors */
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-light: #0f172a;
--text-heading: #f8fafc;

/* UI Elements */
--logo-bg: #1e293b;
--logo-border: #334155;
--hover-bg: #334155;
--dropdown-bg: #1e293b;
--dropdown-border: #334155;
--border-color: #334155;
--shadow-color: rgba(0, 0, 0, 0.3);
--shadow-light: rgba(0, 0, 0, 0.2);

/* Form Elements */
--input-bg: #1e293b;
--input-border: #334155;
--input-focus: #60a5fa;
--button-bg: #1e293b;
--button-border: #334155;

/* Cards & Components */
--card-bg: #1e293b;
--card-border: #334155;
--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
--hero-bg: linear-gradient(135deg, #2c2c2c 0%, #2e2e2e 100%);

/* Dashboard Specific */
--sidebar-bg: #1e293b;
--sidebar-border: #334155;
--sidebar-hover: #334155;
--content-bg: #0f172a;
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgba(249, 250, 251, 0.16);
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(52, 72, 98);
}
}

/* Global Transitions */
* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Base Elements */
html {
background-color: var(--bg-primary);
}

body {
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
color: var(--text-primary);
min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
color: var(--text-heading);
}

p {
/*! color: var(--text-secondary) !important; */
}

/* Layout Components */
.container, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl {
background-color: transparent;
}

/* Cards and Containers */
.card, .bg-white {
background-color: var(--card-bg) !important;
border-color: var(--card-border) !important;
/*! box-shadow: var(--card-shadow) !important; */
}

.bg-gray-50 {
background-color: var(--bg-section) !important;
}

.bg-gray-100 {
background-color: var(--bg-tertiary) !important;
}

.bg-gray-200 {
background-color: var(--bg-tertiary) !important;
}

/* Text Colors */
.text-gray-900 {
color: var(--text-heading) !important;
}

.text-gray-800 {
color: var(--text-primary) !important;
}

.text-gray-700 {
color: var(--text-secondary) !important;
}

.text-gray-600 {
color: var(--text-secondary) !important;
}

.text-gray-500 {
color: var(--text-muted) !important;
}

.text-gray-400 {
color: var(--text-muted) !important;
}

.text-gray-300 {
color: var(--text-muted) !important;
}

/* Borders */
.border-gray-200, .border-gray-300, .border-gray-100 {
border-color: var(--border-color) !important;
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
border-color: var(--border-color) !important;
}

/* Form Elements */
input, textarea, select {
background-color: var(--input-bg) !important;
border-color: var(--input-border) !important;
color: var(--text-primary) !important;
}

input::placeholder, textarea::placeholder {
color: var(--text-muted) !important;
}

input:focus, textarea:focus, select:focus {
border-color: var(--input-focus) !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Button Fixes for Light Mode */
.btn, button:not(.user-button):not(.favorite-heart):not(.bg-gradient-to-r):not(.theme-switch):not(.bg-blue-600):not(.bg-primary-600):not(.from-primary-500):not(.from-accent-500) {
/* background-color: var(--button-bg) !important; */
/* border-color: var(--button-border) !important; */
/*  color: var(--text-primary) !important; */
}

.btn:hover, button:not(.bg-gradient-to-r):not(.theme-switch):not(.bg-blue-600):not(.bg-primary-600):not(.from-primary-500):not(.from-accent-500):hover {
/* background-color: var(--hover-bg) !important; */
}

/* Gradient Buttons - Keep White Text */
.bg-gradient-to-r, .from-primary-500, .from-accent-500, .from-indigo-500, .from-blue-500 {
color: #ffffff !important;
}

.bg-gradient-to-r:hover, .from-primary-500:hover, .from-accent-500:hover, .from-indigo-500:hover, .from-blue-500:hover {
color: #ffffff !important;
}

/* Tables */
table {
background-color: var(--card-bg) !important;
}

th {
background-color: var(--bg-section) !important;
color: var(--text-heading) !important;
border-color: var(--border-color) !important;
}

td {
color: var(--text-secondary) !important;
border-color: var(--border-color) !important;
}

tr:nth-child(even) {
background-color: var(--bg-section) !important;
}

/* Modals and Overlays */
.modal, .overlay, .dropdown-menu {
background-color: var(--card-bg) !important;
border-color: var(--card-border) !important;
}

/* Shadows */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
box-shadow: var(--card-shadow) !important;
}

/* Hero Sections */
.hero-gradient, .bg-gradient-to-r {
background: var(--hero-bg) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
background: var(--text-muted);
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--text-secondary);
}

/* Alerts and Notifications */
.alert, .notification {
background-color: var(--card-bg) !important;
border-color: var(--card-border) !important;
color: var(--text-primary) !important;
}

/* Code blocks */
pre, code {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}

/* Links */
a:not(.nav-link):not(.btn):not(.button):not(.text-blue-600):not(.text-primary-600) {
/*! color: #3b82f6; */
}

a:not(.category-badge):not(.nav-link):not(.btn):not(.button):not(.text-blue-600):not(.text-primary-600):hover {
/*! color: #2563eb; */
}

[data-theme="dark"] a:not(.nav-link):not(.btn):not(.button):not(.text-blue-600):not(.text-primary-600) {
/*! color: #60a5fa; */
}

[data-theme="dark"] a:not(.nav-link):not(.btn):not(.button):not(.text-blue-600):not(.text-primary-600):hover {
color: #93c5fd;
}

/* Dashboard Specific Styles */
.sidebar {
background-color: var(--sidebar-bg) !important;
border-color: var(--sidebar-border) !important;
}

.sidebar-item:hover {
background-color: var(--sidebar-hover) !important;
}

.main-content {
background-color: var(--content-bg) !important;
}

/* Course Cards Enhanced */
.course-card {
background-color: var(--card-bg) !important;
border-color: var(--card-border) !important;
box-shadow: none !important;
border: 1px solid var(--card-border) !important;
border-radius: 8px !important;
}

.course-card:hover {
box-shadow: none !important;
background-color: var(--bg-section) !important;
border-color: var(--primary-color) !important;
}
.course-card img {
transition: transform 0.3s ease-in-out;
}
.course-card:hover img {
transform: scale(1.1);
}
.card-category-badge {
border: 1px solid #AAD3FF;
background: #ebf4ff !important;
}
/* Category Cards Enhanced */
.category-card {
background-color: var(--card-bg) !important;
border-color: var(--card-border) !important;
box-shadow: var(--card-shadow) !important;
}

.category-card:hover {
box-shadow: 0 25px 50px -12px var(--shadow-color) !important;
}

.category-title {
color: var(--text-heading) !important;
}

.category-description {
color: var(--text-secondary) !important;
}

.category-icon::before {
background: var(--category-color, #6366f1) !important;
}

/* Filter and Glass Effects */
.filter-card, .glass-effect {
background-color: #ffffffc4 !important;
border-color: #59cab34f !important;
backdrop-filter: blur(16px) saturate(180%);
}

.stats-card {
background-color: var(--card-bg) !important;
border-color: var(--card-border) !important;
box-shadow: var(--card-shadow) !important;
}

/* Footer Enhanced Theming - Professional Light Mode */
footer {
background: linear-gradient(135deg, #3b82f6 0%, #20456f 100%) !important;
color: #ffffff !important;
}

footer h3 {
color: #ffffff !important;
}

footer p {
color: #e0e7ff !important;
}

footer a {
color: #e0e7ff !important;
}

footer a:hover {
color: #ffffff !important;
}

footer .text-gray-300 {
color: #e0e7ff !important;
}

footer .text-gray-400 {
color: #c7d2fe !important;
}

footer .text-white {
color: #ffffff !important;
}

footer input {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}

footer input::placeholder {
color: #c7d2fe !important;
}

/* Footer Dark Mode */
[data-theme="dark"] footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
color: #f1f5f9 !important;
}

[data-theme="dark"] footer input {
background-color: #1e293b !important;
border-color: #334155 !important;
color: #f1f5f9 !important;
}

[data-theme="dark"] footer input::placeholder {
color: #94a3b8 !important;
}

[data-theme="dark"] footer p {
color: #cbd5e1 !important;
}

[data-theme="dark"] footer a {
color: #cbd5e1 !important;
}

[data-theme="dark"] footer .text-gray-300 {
color: #cbd5e1 !important;
}

[data-theme="dark"] footer .text-gray-400 {
color: #94a3b8 !important;
}

/* Hero Section Theming */
.hero-gradient {
background: var(--hero-bg) !important;
}

/* Courses.php Specific Fixes */
[data-theme="dark"] .hero-gradient {
background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%) !important;
}

/* Hero Text Colors for Dark Mode */
[data-theme="dark"] .hero-gradient .text-white {
color: #f8fafc !important;
}

[data-theme="dark"] .hero-gradient .text-blue-100 {
color: #dbeafe !important;
}

[data-theme="dark"] .hero-gradient h1 {
color: #f8fafc !important;
}

[data-theme="dark"] .hero-gradient p {
color: #dbeafe !important;
}

/* Level Badges */
.level-badge {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}

/* Category Filter Cards */
.category-filter-card:hover {
background-color: var(--hover-bg) !important;
}

/* Search and Filter Elements */
.search-glow:focus {
background-color: var(--input-bg) !important;
color: var(--text-primary) !important;
}

/* Rating Stars */
.rating-stars .fas.fa-star {
color: #fbbf24 !important;
}

/* Course Meta Information */
.course-card .text-gray-500,
.course-card .text-gray-600 {
color: var(--text-secondary) !important;
}

.course-card .text-gray-400 {
color: var(--text-muted) !important;
}

.course-card .text-gray-900 {
color: var(--text-heading) !important;
}

/* Statistics Section */
.stats-counter {
color: var(--text-primary) !important;
}

/* Homepage Specific Styles */
.floating-animation {
color: var(--text-primary) !important;
}

/* Course Card Gradients Override */
[data-theme="dark"] .course-card {
background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
border-color: #334155 !important;
}

[data-theme="dark"] .course-card:hover {
background: linear-gradient(145deg, #1e293b 0%, #334155 100%) !important;
}

/* Category Card Dark Mode */
[data-theme="dark"] .category-card {
background-color: #1e293b !important;
border-color: #334155 !important;
}

[data-theme="dark"] .category-card:hover {
border-color: var(--category-color, #6366f1) !important;
}

/* Footer Dark Mode Specific */
[data-theme="dark"] footer .bg-gradient-to-r {
background: var(--hero-bg) !important;
}

[data-theme="dark"] footer .bg-gray-800 {
background-color: #1e293b !important;
}

[data-theme="dark"] footer .border-gray-600 {
border-color: #334155 !important;
}

[data-theme="dark"] footer .border-gray-700 {
border-color: #334155 !important;
}

/* Courses Page Specific Dark Mode Fixes */
[data-theme="dark"] .glass-effect {
background-color: rgba(30, 41, 59, 0.85) !important;
border-color: rgba(51, 65, 85, 0.3) !important;
}

[data-theme="dark"] .filter-card {
background: rgba(30, 41, 59, 0.95) !important;
border-color: rgba(51, 65, 85, 0.2) !important;
}

[data-theme="dark"] .stats-card {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(30, 41, 59, 0.7) 100%) !important;
border-color: #334155 !important;
}

/* Course Card Category Badge */
.course-card .bg-white\/90 {
background-color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .course-card .bg-white\/90 {
background-color: rgba(30, 41, 59, 0.9) !important;
color: #cbd5e1 !important;
}

/* Students Count Badge */
.course-card .bg-gray-50 {
background-color: var(--bg-section) !important;
}

/* Pagination */
.pagination .page-link {
background-color: var(--card-bg) !important;
/*    border-color: var(--border-color) !important; */
color: var(--text-primary) !important;
}

.pagination .page-link:hover {
background-color: var(--hover-bg) !important;
}

/* Tooltips */
.tooltip {
background-color: var(--card-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
}

/* Loading Spinners */
.spinner {
border-color: var(--border-color) !important;
border-top-color: var(--text-primary) !important;
}

/* Breadcrumbs */
.breadcrumb {
background-color: var(--bg-section) !important;
}

.breadcrumb-item {
color: var(--text-muted) !important;
}

.breadcrumb-item.active {
color: var(--text-primary) !important;
}

/* Badges */
.badge {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}

/* Progress Bars */
.progress-bar {
background-color: var(--bg-tertiary) !important;
}

/* Media Queries for Mobile */
@media (max-width: 768px) {
.mobile-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}
}
/* Remove all shadows from buttons */
button, .btn, .button, input[type="submit"], input[type="button"] {
/*! box-shadow: none !important; */
/*! border-radius: 6px !important; */
}

button:hover, .btn:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover {
box-shadow: none !important;
}

/* Remove shadows from all elements */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
box-shadow: none !important;
}

/* Print Styles */
@media print {
* {
    background-color: white !important;
    color: black !important;
}
}	
.social-contacts a {
text-align: center;
line-height: 38px;
}
/* Breadcrumb Navigation */
.breadcrumb-nav {
background: rgba(62, 200, 136, 0.9);
backdrop-filter: blur(8px);
border-radius: 100px;
padding: 0.75rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.breadcrumb-list {
display: flex;
align-items: center;
gap: 1rem;
}

.breadcrumb-item {
position: relative;
display: flex;
align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
content: '';
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
margin-right: 1rem;
}

.breadcrumb-item a {
display: flex;
align-items: center;
color: rgb(255, 255, 255);
font-size: 0.875rem;
transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
color: #d3ffe0 !important;
}

.breadcrumb-item i {
margin-left: 0.5rem;
font-size: 1rem;
}

/* Dark Mode Styles */
[data-theme="dark"] .breadcrumb-nav {
background: rgba(15, 23, 42, 0.3);
border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Responsive */
@media (max-width: 640px) {
.breadcrumb-nav {
    padding: 0.5rem 1rem;
}

.breadcrumb-item span {
    display: none;
}

.breadcrumb-item i {
    margin: 0;
    font-size: 1.25rem;
}

.breadcrumb-item:not(:last-child)::after {
    margin-right: 0.5rem;
}
}