/* Reset and Basic Styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.7; /* Enhanced line height */
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* RTL SUPPORT ENHANCED */
.rtl {
    direction: rtl;
    text-align: right;
}

.rtl * {
    direction: rtl;
}

/* Exceptions for code blocks in RTL */
.rtl .code-block,
.rtl .code-display,
.rtl pre,
.rtl code {
    direction: ltr !important;
    text-align: left !important;
}


/* TYPOGRAPHY ENHANCEMENTS */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

h1 {
    font-size: 2.25rem;
    margin-bottom: 2rem;
}

h2 {
    font-size: 1.875rem;
    margin-bottom: 1.75rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* Enhanced spacing for content blocks */
.content-blocks > * {
    margin-bottom: 3rem;
}

.prose {
    line-height: 1.8;
}

.prose p {
    margin-bottom: 1.75rem;
    line-height: 1.85;
}

.prose ul,
.prose ol {
    margin: 2rem 0;
    padding-left: 2.5rem;
    line-height: 1.8;
}

.prose li {
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* RTL list adjustments */
.rtl .prose ul,
.rtl .prose ol {
    padding-left: 0;
    padding-right: 2.5rem;
}

/* MOBILE MENU BUTTON */
.mobile-menu-button {
    display: none;
    position: fixed;
    top: 0.75rem;
    right: 1rem;
    z-index: 9999;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    width: 48px;
    height: 48px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mobile-menu-button svg {
    width: 24px;
    height: 24px;
    color: #374151;
    transition: color 0.3s ease;
}

/* Dark mode mobile menu button */
.dark .mobile-menu-button {
    background: #374151;
    border-color: #4b5563;
}

.dark .mobile-menu-button svg {
    color: #d1d5db;
}

/* RTL Support for mobile menu */
.rtl .mobile-menu-button {
    right: auto;
    left: 1rem;
}

/* MOBILE OVERLAY */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* Dark mode overlay */
.dark .mobile-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* MAIN LAYOUT CONTAINER */
.flex {
    display: flex;
}

.min-h-screen {
    min-height: 100vh;
}

/* SIDEBAR STYLES */
.sidebar {
    background: white;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark mode sidebar */
.dark .sidebar {
    background: #1f2937;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
}

/* RTL sidebar shadow */
.rtl .sidebar {
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1);
}

.dark.rtl .sidebar {
    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.3);
}

/* MAIN CONTENT AREA */
.main-content {
    flex: 1;
    width: 100%;
    padding: 0;
}

/* DESKTOP STYLES (Default) */
@media (min-width: 769px) {
    .mobile-menu-button {
        display: none;
    }
    
    .mobile-overlay {
        display: none;
    }
    
    .sidebar {
        width: 256px;
        position: sticky;
        top: 0;
        height: 100vh;
    }
    
    /* RTL sidebar positioning on desktop */
    .rtl .sidebar {
        order: 2;
    }
    
    .rtl .main-content {
        order: 1;
    }
    
    .main-content {
        padding: 2rem;
        max-width: none;
        margin: 0;
    }
    
    /* Enhanced typography for desktop */
    h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 2rem;
        line-height: 1.25;
    }
    
    h3 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 1.125rem;
        line-height: 1.8;
    }
}

/* MOBILE STYLES */
@media (max-width: 768px) {
    /* Show mobile menu button */
    .mobile-menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* LAYOUT: Force block layout */
    .flex.min-h-screen {
        display: block !important;
    }
    
    .sidebar {
        /* Remove from normal flow completely */
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        z-index: 1001;
        transition: transform 0.3s ease;
        display: none;
    }
    
    .sidebar.active {
        display: block;
        transform: translateX(0);
    }
    
    /* RTL SIDEBAR */
    .rtl .sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
    
    .rtl .sidebar.active {
        transform: translateX(0);
    }
    
    /* MAIN CONTENT: Full width with no interference */
    .main-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Enhanced mobile typography */
    h1 {
        font-size: 1.875rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 1.25rem;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.4;
        margin-bottom: 1rem;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.9; /* Extra spacing for mobile */
        margin-bottom: 1.75rem;
    }
    
    /* Enhanced content spacing on mobile */
    .content-blocks > * {
        margin-bottom: 2.5rem;
    }
    
    .prose p {
        margin-bottom: 2rem;
        line-height: 1.9;
    }
    
    .prose ul,
    .prose ol {
        margin: 2rem 0;
        line-height: 1.8;
    }
    
    .prose li {
        margin-bottom: 1.25rem;
        line-height: 1.8;
    }
}

/* HTMX INDICATORS */
.htmx-indicator {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

/* ACCESSIBILITY */
.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;
}

/* CODE BLOCKS STYLING */
.code-editor-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    transition: box-shadow 0.3s ease;
}

.dark .code-editor-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.code-block {
    direction: ltr !important;
    text-align: left !important;
}

.code-block pre {
    white-space: pre;
    tab-size: 4;
    -moz-tab-size: 4;
    -webkit-tab-size: 4;
}

/* TABLE IMPROVEMENTS */
.table-responsive {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    transition: box-shadow 0.3s ease;
}

.dark .table-responsive {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* BREADCRUMB IMPROVEMENTS */
.breadcrumb {
    margin-bottom: 2rem;
}

.breadcrumb ol {
    gap: 0.75rem;
}

/* RTL breadcrumb */
.rtl .breadcrumb ol {
    flex-direction: row-reverse;
}

/* TOPIC NAVIGATION ENHANCEMENTS */
.topic-navigation {
    margin: 3rem 0;
    padding: 2rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dark .topic-navigation {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    border: 1px solid #4b5563;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* QUIZ SECTION IMPROVEMENTS */
.quiz-modern-container {
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    margin: 3rem 0;
    transition: box-shadow 0.3s ease;
}

.dark .quiz-modern-container {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* CONTENT LISTS ENHANCEMENT */
.prose ul,
.prose ol,
.content-blocks ul,
.content-blocks ol {
    list-style: revert !important;
    margin: 2rem 0 !important;
    padding-left: 2.5rem !important;
}

.rtl .prose ul,
.rtl .prose ol,
.rtl .content-blocks ul,
.rtl .content-blocks ol {
    padding-left: 0 !important;
    padding-right: 2.5rem !important;
}

.prose ul li,
.prose ol li,
.content-blocks ul li,
.content-blocks ol li {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.prose ul {
    list-style-type: disc !important;
}

.prose ol {
    list-style-type: decimal !important;
}

/* RESPONSIVE IMPROVEMENTS */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 240px;
    }
    
    .main-content {
        padding: 1.5rem;
    }
    
    h1 {
        font-size: 2.125rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    p {
        font-size: 1.0625rem;
        line-height: 1.8;
    }
}

/* PERFORMANCE OPTIMIZATIONS */
.code-block,
.quiz-modern-container,
.table-responsive {
    will-change: transform;
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .nav-link:hover {
        transform: none;
    }
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
    .sidebar {
        border: 2px solid #000;
    }
    
    .code-editor-container,
    .quiz-modern-container,
    .table-responsive {
        border: 2px solid #000;
    }
    
    .dark .sidebar {
        border: 2px solid #fff;
    }
    
    .dark .code-editor-container,
    .dark .quiz-modern-container,
    .dark .table-responsive {
        border: 2px solid #fff;
    }
}

/* THEME TOGGLE BUTTON ANIMATION */
#theme-toggle {
    transition: all 0.3s ease;
}

#theme-toggle:hover {
    transform: scale(1.1);
}

#theme-toggle .sun-icon,
#theme-toggle .moon-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* SMOOTH SCROLLBAR FOR DARK MODE */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    transition: background 0.3s ease;
}

.dark ::-webkit-scrollbar-track {
    background: #374151;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* BREADCRUMB DARK MODE FIX */
.breadcrumb {
    margin-bottom: 2rem;
    transition: background-color 0.3s ease;
}

.breadcrumb ol {
    gap: 0.75rem;
}

/* RTL breadcrumb */
.rtl .breadcrumb ol {
    flex-direction: row-reverse;
}

/* Breadcrumb background fix for dark mode */
.dark .breadcrumb {
    background-color: transparent;
}

.dark .breadcrumb a {
    color: #9ca3af;
}

.dark .breadcrumb a:hover {
    color: #60a5fa;
}

/* SEARCH BOX DARK MODE FIX */
.search-container input {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.dark .search-container input,
.dark input[type="search"],
.dark input[name="q"] {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark .search-container input::placeholder,
.dark input[type="search"]::placeholder,
.dark input[name="q"]::placeholder {
    color: #9ca3af !important;
}

.dark .search-container input:focus,
.dark input[type="search"]:focus,
.dark input[name="q"]:focus {
    background-color: #1f2937 !important;
    border-color: #14b8a6 !important;
    color: #f9fafb !important;
}

/* MAIN CONTENT TEXT COLOR */
.main-content {
    flex: 1;
    width: 100%;
    padding: 0;
    transition: color 0.3s ease;
}

.dark .main-content {
    color: #f9fafb;
}

.dark  h1,
.dark  h2,
.dark  h3,
.dark  h4,
.dark  h5,
.dark  h6 {
    color: #f9fafb;
}

.dark .main-content p {
    color: #d1d5db;
}

.dark .main-content li {
    color: #d1d5db;
}

/* FEATURED EXAMPLES SECTION DARK MODE */
.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .text-gray-900 {
    color: #f9fafb !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

.dark .text-gray-500 {
    color: #6b7280 !important;
}

.dark .border-gray-200 {
    border-color: #374151 !important;
}

.dark .border-gray-100 {
    border-color: #4b5563 !important;
}

/* STATISTICS SECTION (500+, 1000+, 50+) */
.stats-section {
    transition: color 0.3s ease;
}

.dark .stats-section .stat-number {
    color: inherit; /* Keep the colored numbers (blue, green, purple) */
}

.dark .stats-section .stat-label {
    color: #9ca3af;
}

/* CARDS AND CONTAINERS */
.dark .bg-gray-50 {
    background-color: #374151 !important;
}

.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* CATEGORY CARDS */
.category-card {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dark .category-card {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .category-card:hover {
    background-color: #374151;
    border-color: #4b5563;
}

/* BUTTONS DARK MODE */
.dark .btn-secondary,
.dark .bg-gray-200 {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark .btn-secondary:hover,
.dark .bg-gray-200:hover {
    background-color: #6b7280 !important;
}

/* LINKS DARK MODE */
.dark a:not(.btn):not(.nav-link) {
    color: #60a5fa;
}

.dark a:not(.btn):not(.nav-link):hover {
    color: #93c5fd;
}

/* BORDER COLORS */
.dark .border {
    border-color: #374151 !important;
}

.dark .border-t {
    border-top-color: #374151 !important;
}

.dark .border-b {
    border-bottom-color: #374151 !important;
}

.dark .border-l {
    border-left-color: #374151 !important;
}

.dark .border-r {
    border-right-color: #374151 !important;
}

/* FORM ELEMENTS */
.dark select,
.dark textarea {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark select:focus,
.dark textarea:focus {
    background-color: #1f2937 !important;
    border-color: #14b8a6 !important;
}

/* DIVIDERS AND SEPARATORS */
.dark hr {
    border-color: #374151;
}

.dark .divide-y > * + * {
    border-top-color: #374151;
}

/* PROGRESS BARS */
.dark .progress-bar {
    background-color: #374151;
}

.dark .progress-fill {
    background-color: #14b8a6;
}

/* TOOLTIPS AND POPOVERS */
.dark .tooltip,
.dark .popover {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

/* DROPDOWN MENUS */
.dark .dropdown-menu {
    background-color: #1f2937;
    border-color: #374151;
}

.dark .dropdown-item {
    color: #d1d5db;
}

.dark .dropdown-item:hover {
    background-color: #374151;
    color: #f9fafb;
}

/* ALERT MESSAGES */
.dark .alert-info {
    background-color: #1e3a8a;
    border-color: #3730a3;
    color: #dbeafe;
}

.dark .alert-warning {
    background-color: #92400e;
    border-color: #b45309;
    color: #fef3c7;
}

.dark .alert-error {
    background-color: #991b1b;
    border-color: #dc2626;
    color: #fecaca;
}

.dark .alert-success {
    background-color: #065f46;
    border-color: #059669;
    color: #d1fae5;
}

/* SIDEBAR BACKGROUND FIXES */
.dark .sidebar .nav-item,
.dark .sidebar .menu-item,
.dark .sidebar .sidebar-item,
.dark .sidebar li {
    background-color: transparent;
    color: #d1d5db;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark .sidebar .nav-item:hover,
.dark .sidebar .menu-item:hover,
.dark .sidebar .sidebar-item:hover,
.dark .sidebar li:hover,
.dark .sidebar a:hover {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-radius: 0.375rem;
}

/* SIDEBAR PROGRESS SECTION BACKGROUND */
.dark .sidebar .progress-section,
.dark .sidebar .progress-container,
.dark .sidebar .progress-wrapper {
    background-color: #1f2937 !important;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* BREADCRUMB BACKGROUND FIXES */
.dark .breadcrumb,
.dark .breadcrumb-container,
.dark nav[aria-label="breadcrumb"],
.dark .breadcrumb-wrapper {
    background-color: #1f2937 !important;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.dark .breadcrumb ol,
.dark .breadcrumb-list,
.dark .breadcrumb ul {
    background-color: transparent !important;
    margin: 0;
    padding: 0;
}

.dark .breadcrumb li,
.dark .breadcrumb-item {
    background-color: transparent !important;
    color: #9ca3af;
    padding: 0.25rem 0;
}

/* TOPIC DETAIL BREADCRUMB SPECIFIC */
.dark .topic-detail .breadcrumb,
.dark .topic-page .breadcrumb,
.dark .content-breadcrumb {
    background-color: #1f2937 !important;
    border: 1px solid #374151;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* SIDEBAR WHITE SECTIONS FIX */
.dark .sidebar .bg-white,
.dark .sidebar .bg-gray-50,
.dark .sidebar .bg-gray-100 {
    background-color: #1f2937 !important;
    border-color: #374151;
}

/* SIDEBAR CARD-LIKE SECTIONS */
.dark .sidebar .card,
.dark .sidebar .panel,
.dark .sidebar .section {
    background-color: #1f2937 !important;
    border: 1px solid #374151;
    border-radius: 0.5rem;
}

/* INLINE CODE TAGS */
code:not(pre code) {
   background-color: #f3f4f6;
   color: #ff3232;
   padding: 0.125rem 0.25rem;
   border-radius: 0.25rem;
   font-size: 0.875em;
   font-weight: 500;
   border: 1px solid #56595e;
   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dark code:not(pre code) {
   background-color: #374151;
   color: #ff6969;
   border-color: #676e77;
}

/* INLINE CODE IN DIFFERENT CONTEXTS */
p code,
li code,
span code,
td code,
th code {
   background-color: #f3f4f6;
   color: #374151;
   padding: 0.125rem 0.25rem;
   border-radius: 0.25rem;
   font-size: 0.875em;
   font-weight: 500;
   border: 1px solid #e5e7eb;
   transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dark p code,
.dark li code,
.dark span code,
.dark td code,
.dark th code {
   background-color: #374151;
   color: #f3f4f6;
   border-color: #4b5563;
}

/* MAKE SURE PRE CODE BLOCKS ARE NOT AFFECTED */
pre code {
   background-color: transparent !important;
   color: inherit !important;
   padding: 0 !important;
   border: none !important;
   border-radius: 0 !important;
}

/* TABLE DARK MODE FIXES */
.dark table,
.dark .table {
   background-color: #1f2937;
   color: #f9fafb;
}

.dark table th,
.dark .table th,
.dark thead th {
   background-color: #374151 !important;
   color: #f9fafb !important;
   border-color: #4b5563 !important;
}

.dark table td,
.dark .table td,
.dark tbody td {
   background-color: #1f2937 !important;
   color: #d1d5db !important;
   border-color: #4b5563 !important;
}

.dark table tr:nth-child(even),
.dark .table tr:nth-child(even),
.dark tbody tr:nth-child(even) {
   background-color: #374151 !important;
}

.dark table tr:nth-child(even) td,
.dark .table tr:nth-child(even) td,
.dark tbody tr:nth-child(even) td {
   background-color: #374151 !important;
}

.dark table tr:hover,
.dark .table tr:hover,
.dark tbody tr:hover {
   background-color: #4b5563 !important;
}

.dark table tr:hover td,
.dark .table tr:hover td,
.dark tbody tr:hover td {
   background-color: #4b5563 !important;
   color: #f9fafb !important;
}

.dark table tr:hover th,
.dark .table tr:hover th,
.dark tbody tr:hover th {
   background-color: #4b5563 !important;
   color: #f9fafb !important;
}

/* TABLE RESPONSIVE CONTAINER */
.dark .table-responsive table {
   background-color: #1f2937 !important;
}

/* GENERAL TABLE ELEMENTS */
.dark th {
   background-color: #374151 !important;
   color: #f9fafb !important;
   border-color: #4b5563 !important;
}

.dark td {
   background-color: #1f2937 !important;
   color: #d1d5db !important;
   border-color: #4b5563 !important;
}

.dark tr:nth-child(even) {
   background-color: #374151 !important;
}

.dark tr:nth-child(even) td {
   background-color: #374151 !important;
}

.dark tr:hover {
   background-color: #4b5563 !important;
}

.dark tr:hover td,
.dark tr:hover th {
   background-color: #4b5563 !important;
   color: #f9fafb !important;
}


/* MOBILE SIDEBAR AND OVERLAY STYLES */

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* Dark mode overlay */
.dark .mobile-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* MOBILE SIDEBAR MODIFICATIONS */
@media (max-width: 768px) {
    /* Sidebar mobile positioning */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        z-index: 1001;
        transition: transform 0.3s ease;
        display: none;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .sidebar.active {
        display: block;
        transform: translateX(0);
    }
    
    /* RTL SIDEBAR */
    .rtl .sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .rtl .sidebar.active {
        transform: translateX(0);
    }
    
    /* Dark mode sidebar shadow */
    .dark .sidebar {
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    }
    
    .dark.rtl .sidebar {
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    }
}

/* MOBILE MENU BUTTON ENHANCEMENTS */
#mobile-menu-btn {
    width: 64px;
    height: 100%;
    align-items: center;
    justify-content: center;
    border: none;
    border-right: 1px solid #4b5563;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#mobile-menu-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

#mobile-menu-btn:hover::before {
    left: 100%;
}

#mobile-menu-btn:hover {
    background: #4b5563;
    transform: translateY(-1px);
}

#mobile-menu-btn.active {
    background: #4b5563;
    border-right-color: #6b7280;
}

#mobile-menu-btn svg {
    width: 20px;
    height: 20px;
    color: #d1d5db;
    transition: all 0.3s ease;
}

#mobile-menu-btn:hover svg {
    color: #f9fafb;
    transform: scale(1.1);
}

#mobile-menu-btn.active svg {
    color: #ffffff;
    transform: rotate(90deg);
}

/* Dark mode mobile menu button */
.dark #mobile-menu-btn {
    border-right-color: #4b5563;
}

.dark #mobile-menu-btn:hover {
    background: #4b5563;
}

.dark #mobile-menu-btn.active {
    background: #6b7280;
    border-right-color: #9ca3af;
}

/* RTL Support for mobile menu button */
.rtl #mobile-menu-btn {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid #4b5563;
}

.dark.rtl #mobile-menu-btn {
    border-left-color: #4b5563;
}

.dark.rtl #mobile-menu-btn.active {
    border-left-color: #9ca3af;
}

/* NAVIGATION MENU ADJUSTMENTS FOR HAMBURGER BUTTON */
.nav-menu-with-hamburger {
    padding-left: 96px !important; /* Space for hamburger button + left scroll */
}

.rtl .nav-menu-with-hamburger {
    padding-left: 48px !important;
    padding-right: 96px !important;
}

/* SCROLL BUTTON ADJUSTMENTS */
#scroll-left.with-hamburger {
    left: 64px;
}

.rtl #scroll-right.with-hamburger {
    right: 64px;
}

/* MOBILE MENU ANIMATIONS */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Apply animations */
.sidebar.active {
    animation: slideInLeft 0.3s ease;
}

.rtl .sidebar.active {
    animation: slideInRight 0.3s ease;
}

/* ACCESSIBILITY IMPROVEMENTS */
#mobile-menu-btn:focus {
    outline: 3px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

.dark #mobile-menu-btn:focus {
    outline: 3px solid rgba(96, 165, 250, 0.5);
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
    #mobile-menu-btn {
        border: 2px solid #000;
    }
    
    .dark #mobile-menu-btn {
        border: 2px solid #fff;
    }
    
    .mobile-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
}

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .mobile-overlay,
    #mobile-menu-btn {
        transition: none !important;
        animation: none !important;
    }
    
    #mobile-menu-btn:hover {
        transform: none !important;
    }
    
    #mobile-menu-btn svg {
        transform: none !important;
    }
    
    #mobile-menu-btn.active svg {
        transform: none !important;
    }
}

/* MOBILE MENU LOADING STATE */
.sidebar.loading {
    opacity: 0.7;
    pointer-events: none;
}

.sidebar.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid #d1d5db;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1002;
}

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

/* MOBILE SIDEBAR CONTENT ENHANCEMENTS */
@media (max-width: 768px) {
    #mobile-menu-btn{display: flex;}
    .sidebar .custom-sidebar-item {
        min-height: 44px; /* Better touch targets */
        font-size: 0.9375rem;
        padding: 0.75rem;
    }
    
    .sidebar .accordion-header {
        min-height: 44px;
        font-size: 0.9375rem;
        padding: 0.75rem;
    }
    
    .sidebar h2 {
        font-size: 1.125rem;
        padding: 1rem 1.25rem;
    }
    
    .sidebar nav {
        padding: 0.75rem;
    }
}


/* Header Mobile Layout Fix */
@media (max-width: 767px) {
    /* Target the main header flex container */
    header .flex.justify-between.items-center.h-14 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Hide the search bar and remove its flex impact */
    header .flex-1.max-w-lg.mx-8.hidden.md\:block {
        display: none !important;
        flex: none !important;
        width: 0 !important;
        margin: 0 !important;
    }
    
    /* Hide Panel button in mobile */
    header .bg-teal-600.hover\:bg-teal-700 {
        display: none !important;
    }
    
    /* Logo section - ensure it stays left */
    header .flex.items-center:first-child {
        flex-shrink: 0 !important;
    }
    
    /* Right section with remaining buttons */
    header .flex.items-center.space-x-3:last-child {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    /* Remove space-x class effect and use gap instead */
    header .flex.items-center.space-x-3:last-child > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Compact remaining buttons for mobile */
    header #language-btn {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Very small screens optimization */
@media (max-width: 480px) {
    header .flex.items-center.space-x-3:last-child {
        gap: 0.5rem !important;
    }
}

/* RTL support */
[dir="rtl"] header .flex.items-center.space-x-3:last-child > * {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/* RTL NAVIGATION SCROLL FIXES */
.rtl #nav-menu {
    direction: rtl;
}

.rtl .scrollbar-hide {
    direction: rtl;
}

/* RTL Scroll Button Positioning */
.rtl #scroll-left {
    right: 0 !important;
    left: auto !important;
    border-left: 1px solid #4b5563 !important;
    border-right: none !important;
}

.rtl #scroll-right {
    left: 0 !important;
    right: auto !important;
    border-right: 1px solid #4b5563 !important;
    border-left: none !important;
}

/* RTL Navigation Menu Padding Adjustments */
.rtl #nav-menu {
    padding-left: 48px !important;
    padding-right: 48px !important;
}

@media (min-width: 769px) {
    .rtl #nav-menu {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
}

/* RTL Mobile Menu Button Border Fix */
@media (max-width: 768px) {
    .rtl #mobile-menu-btn {
        border-left: 1px solid #4b5563 !important;
        border-right: none !important;
    }
    
    .dark.rtl #mobile-menu-btn {
        border-left-color: #4b5563 !important;
    }
}

/* RTL Navigation Overflow Fix */
.rtl .overflow-x-auto {
    direction: rtl;
}

/* RTL Header Space Adjustments */
.rtl .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

/* RTL Navigation Arrow Direction Fix */
.rtl #scroll-left svg {
    transform: scaleX(-1);
}

.rtl #scroll-right svg {
    transform: scaleX(-1);
}

/* RTL Navigation Items Natural Flow */
.rtl .nav-menu-item {
    direction: ltr;
    display: inline-block;
}

/* RTL Search Input Padding */
.rtl input[name="q"] {
    padding-right: 3rem !important;
    padding-left: 1rem !important;
}

.rtl .search-icon {
    right: 1rem !important;
    left: auto !important;
}

/* RTL Navigation Scroll Button Z-index */
.rtl #scroll-left,
.rtl #scroll-right {
    z-index: 20;
}

/* RTL Language Button Spacing */
.rtl #language-btn {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* RTL Mobile Search Button */
.rtl #mobile-search-btn {
    margin-right: 0.75rem;
    margin-left: 0;
}

/* RTL Theme Toggle Button */
.rtl #theme-toggle {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* RTL Header Logo Margin */
.rtl .header-logo {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* RTL Navigation Items Separator */
.rtl .nav-separator {
    margin: 0 0.25rem;
}

/* RTL Scroll Button Hover Effects */
.rtl #scroll-left:hover,
.rtl #scroll-right:hover {
    background-color: #4b5563;
}

/* RTL Navigation Menu Container */
.rtl .nav-menu-container {
    direction: rtl;
}

/* RTL Navigation Item Links */
.rtl .nav-menu-container a {
    direction: ltr;
    display: inline-block;
}

/* RTL Border Utilities */
.rtl .border-r {
    border-right: none !important;
    border-left: 1px solid #4b5563 !important;
}

.rtl .border-l {
    border-left: none !important;
    border-right: 1px solid #4b5563 !important;
}

/* Dark Mode RTL Borders */
.dark.rtl .border-r {
    border-left-color: #4b5563 !important;
}

.dark.rtl .border-l {
    border-right-color: #4b5563 !important;
}

/* RTL Navigation Scroll Smooth */
.rtl #nav-menu {
    scroll-behavior: smooth;
}

/* RTL Mobile Menu Button Active State */
.rtl #mobile-menu-btn.active {
    background-color: #4b5563;
    border-left-color: #6b7280;
}

/* RTL Navigation Menu Focus */
.rtl #nav-menu:focus-within {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
}

/* RTL High Contrast Mode */
@media (prefers-contrast: high) {
    .rtl #scroll-left,
    .rtl #scroll-right {
        border: 2px solid #000;
    }
    
    .dark.rtl #scroll-left,
    .dark.rtl #scroll-right {
        border: 2px solid #fff;
    }
}

/* RTL Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .rtl #nav-menu {
        scroll-behavior: auto;
    }
    
    .rtl #scroll-left svg,
    .rtl #scroll-right svg {
        transform: none;
    }
}

/* RTL Mobile Navigation Adjustments */
@media (max-width: 768px) {
    .rtl .nav-mobile-container {
        direction: rtl;
    }
    
    .rtl #nav-menu {
        padding-left: 0 !important;
        padding-right: 64px !important;
    }
}

/* RTL Navigation Performance */
.rtl #nav-menu,
.rtl #scroll-left,
.rtl #scroll-right {
    will-change: transform;
}