.bg-sidebar {
    background-color: #222223 !important;
}

.bg-main {
    background-color: #1d1d1d !important;
}


#sidebar {
    overflow-y: auto;
    max-height: 100vh;
}

#sidebar nav {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

.bg-gray-50 {
    background-color: #f9fafb !important;
}

.bg-gray-100 {
    background-color: #f3f4f6 !important;
}

.bg-white {
    background-color: #ffffff !important;
}

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

.text-gray-700 {
    color: #374151 !important;
}

.text-gray-600 {
    color: #4b5563 !important;
}

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

.border-gray-300 {
    border-color: #d1d5db !important;
}

.bg-white .text-gray-400 {
    color: #6b7280 !important;
}

.bg-blue-100 {
    background-color: #dbeafe !important;
}

.text-blue-900 {
    color: #1e3a8a !important;
}

.bg-white #sidebar a:hover {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

.bg-white #sidebar a:hover .text-gray-400 {
    color: #1f2937 !important;
}

.bg-white .prose-invert {
    color: #111827 !important;
}

.bg-white .prose-invert h1,
.bg-white .prose-invert h2,
.bg-white .prose-invert h3 {
    color: #111827 !important;
}

.bg-gray-700\/50 {
    background-color: rgba(55, 65, 81, 0.5) !important;
}

.prose-invert {
    color: #e5e7eb;
}

.prose-invert h1 {
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.prose-invert h2 {
    color: #ffffff;
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose-invert h3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose-invert p {
    margin-bottom: 1rem;
    line-height: 1.625;
}

.prose-invert ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose-invert li {
    margin-bottom: 0.5rem;
}

mark {
    background-color: #fbbf24;
    color: #111827;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

main > header.sticky {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

@media (max-width: 1023px) {
    #sidebar {
        position: fixed;
        left: 0;
        top: 64px; 
        height: calc(100vh - 64px); 
        z-index: 45;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    #sidebar:not(.hidden) {
        transform: translateX(0);
    }

    body.sidebar-open {
        overflow: hidden;
    }

    main > header.sticky {
        position: sticky;
        z-index: 50;
    }

}

@media (max-width: 640px) {
    main > header.sticky #searchContainer {
        max-width: 200px;
    }
}

@media (max-width: 379px) {
    header .flex.items-center span:last-child {
        display: none !important;
    }
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 3px;
}

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

.nav-icon {
    background-color: #ffffff;
    opacity: 0.9;
    flex-shrink: 0;
}

.page-title-icon {
    background-color: #ffffff;
    opacity: 0.9;
    flex-shrink: 0;
    vertical-align: middle;
}

.telegram-icon {
    color: #ffffff;
    fill: currentColor;
}

.bg-white .nav-icon {
    background-color: #000000;
    opacity: 0.8;
}

.bg-white .page-title-icon {
    background-color: #000000;
    opacity: 0.8;
}

.bg-white .telegram-icon {
    color: #000000;
    fill: currentColor;
}

.bg-blue-500 .telegram-icon,
.bg-blue-600 .telegram-icon {
    color: #ffffff !important;
    fill: currentColor !important;
}

.telegram-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav-icon,
.page-title-icon {
    mask-size: contain;
    -webkit-mask-size: contain;
}