/* Ahur Lab - Critical CSS Fixes */
/* This file fixes z-index, layout, and display issues */

/* ============================================
   Z-INDEX HIERARCHY FIX
   ============================================ */

/* Navbar must be on top of everything */
.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Add padding to body to account for fixed navbar */
body {
    padding-top: 70px !important;
}

[data-theme="dark"] .navbar {
    background: rgba(30, 41, 59, 0.98) !important;
}

/* Fix sticky sidebar TOC - must be below navbar */
.col-lg-4 .sticky-top,
aside .sticky-top,
.sticky-top {
    position: sticky !important;
    top: 80px !important; /* Below fixed navbar */
    z-index: 50 !important; /* Much lower than navbar */
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-bottom: 1rem !important;
}

/* Main content area */
main {
    position: relative !important;
    z-index: 1 !important;
}

.post-content {
    position: relative !important;
    z-index: 1 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ============================================
   RTL COLUMN ORDERING FIX
   ============================================ */

/* For desktop screens, ensure proper column ordering */
@media (min-width: 992px) {
    /* In RTL, we want content on left and TOC on right */
    /* Bootstrap's RTL already reverses columns, but we need explicit ordering */

    /* Main content should appear first (left side in RTL) */
    .col-lg-8.order-lg-1 {
        order: 1 !important;
    }

    /* Sidebar with TOC should appear second (right side in RTL) */
    .col-lg-4.order-lg-2 {
        order: 2 !important;
    }

    /* Ensure row uses flexbox */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

/* Mobile view - stack normally */
@media (max-width: 991px) {
    .order-lg-1,
    .order-lg-2 {
        order: initial !important;
    }
}

/* ============================================
   TOC (Table of Contents) FIXES
   ============================================ */

/* Remove ALL duplicate TOC sections - more aggressive */
.post-content .toc,
.post-content nav#toc,
.post-content nav.toc,
article .toc,
article nav.toc,
.col-lg-8 .toc,
.col-lg-8 nav.toc {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Only show TOC in sidebar */
.col-lg-4 .toc,
aside .toc {
    display: block !important;
}

/* Remove card body padding for TOC */
.sticky-top .card-body {
    padding: 0.75rem !important;
}

/* Remove card border for TOC */
.sticky-top .card {
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Style the TOC properly */
.toc {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.toc-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border: none !important;
}

.toc-list ul {
    padding-left: 0.75rem !important;
    padding-right: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.toc-list li {
    margin: 0 !important;
}

.toc-item {
    margin-bottom: 0 !important;
    padding: 0.2rem 0.4rem 0.2rem 0 !important;
    border-right: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

.toc-item:hover {
    border-right-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.05) !important;
}

.toc-item a {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0.1rem 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

.toc-item a:hover {
    color: var(--primary) !important;
}

/* ============================================
   CODE BLOCK FIXES
   ============================================ */

/* Fix code block container - Override Prism styles */
pre,
pre[class*="language-"],
pre.language-bash,
pre.language-javascript,
pre.language-python,
pre.language-css,
pre.language-html,
pre.language-php,
pre.language-sql,
pre.language-json,
pre.language-yaml,
pre.language-markdown {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    position: relative !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    margin: 1.5rem 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
    display: block !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] pre {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

/* Fix code element inside pre - Override Prism */
pre code,
pre[class*="language-"] code,
code[class*="language-"],
.token {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plain !important;
    display: block !important;
    background: transparent !important;
    color: #e2e8f0 !important;
    padding: 1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    position: relative !important;
    font-family:
        "Fira Code", "Cascadia Code", "JetBrains Mono", "Consolas", "Monaco",
        monospace !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    tab-size: 4 !important;
    -moz-tab-size: 4 !important;
    white-space: pre !important;
    word-spacing: normal !important;
    word-break: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
    text-shadow: none !important;
}

[data-theme="dark"] pre code {
    color: #f1f5f9 !important;
}

/* Inline code styling */
code:not(pre code) {
    direction: ltr !important;
    unicode-bidi: embed !important;
    background: rgba(124, 58, 237, 0.1) !important;
    color: #7c3aed !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px !important;
    font-family: "Fira Code", "Cascadia Code", monospace !important;
    font-size: 0.875em !important;
    white-space: nowrap !important;
}

[data-theme="dark"] code:not(pre code) {
    background: rgba(167, 139, 250, 0.1) !important;
    color: #a78bfa !important;
}

/* Fix code syntax highlighting - Override Prism theme */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #64748b !important;
    font-style: italic !important;
}

.token.keyword,
.token.control,
.token.directive {
    color: #f472b6 !important;
    font-weight: bold !important;
}

.token.string,
.token.char,
.token.attr-value {
    color: #34d399 !important;
}

.token.number,
.token.boolean {
    color: #60a5fa !important;
}

.token.function,
.token.method {
    color: #c084fc !important;
}

.token.variable,
.token.constant {
    color: #fbbf24 !important;
}

.token.class-name,
.token.builtin {
    color: #22d3ee !important;
}

.token.operator,
.token.entity {
    color: #94a3b8 !important;
}

.token.punctuation {
    color: #cbd5e1 !important;
}

.token.tag {
    color: #fb923c !important;
}

.token.attr-name,
.token.property {
    color: #fbbf24 !important;
}

/* Code copy button styling */
.copy-code-btn,
.code-block-wrapper button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    padding: 0.25rem 0.625rem !important;
    background: rgba(139, 92, 246, 0.1) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.code-block-wrapper .copy-code-btn:hover {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #e9d5ff !important;
    transform: translateY(-1px) !important;
}

.copy-code-btn.copied {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #86efac !important;
}

/* Ensure code blocks have proper scrollbar */
pre::-webkit-scrollbar,
pre code::-webkit-scrollbar {
    height: 8px !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

pre::-webkit-scrollbar-thumb,
pre code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
}

pre::-webkit-scrollbar-thumb:hover,
pre code::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   LAYOUT FIXES
   ============================================ */

/* Fix main content area */
.col-lg-8 {
    position: relative !important;
    z-index: 1 !important;
}

.col-lg-4 {
    position: relative !important;
    z-index: 2 !important; /* Higher than content but lower than navbar */
}

/* Fix card overlaps */
.card {
    position: relative !important;
    z-index: auto !important;
}

/* Ensure proper spacing from navbar */
main.container {
    padding-top: 2rem !important;
}

/* Fix breadcrumb styling */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
}

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

@media (max-width: 991px) {
    /* Hide desktop TOC on mobile */
    .d-none.d-lg-block {
        display: none !important;
    }

    /* Ensure navbar stays on top on mobile */
    .navbar {
        z-index: 9999 !important;
    }

    /* Fix code blocks on mobile */
    pre code {
        font-size: 0.75rem !important;
        padding: 0.75rem !important;
    }
}

@media (max-width: 768px) {
    /* Adjust main padding on mobile */
    main.container {
        padding-top: 1rem !important;
    }

    /* Fix sidebar on mobile */
    .col-lg-4 {
        margin-top: 2rem !important;
    }
}

/* ============================================
   RTL/LTR MIXED CONTENT FIXES
   ============================================ */

/* Ensure Persian content stays RTL */
body {
    direction: rtl !important;
    text-align: right !important;
}

/* But code must be LTR */
pre,
code,
.language-*,
.token {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plain !important;
}

/* Fix mixed direction in headers */
h1,
h2,
h3,
h4,
h5,
h6 {
    unicode-bidi: plaintext !important;
}

/* ============================================
   DARK MODE SPECIFIC FIXES
   ============================================ */

[data-theme="dark"] {
    /* Fix code block colors in dark mode */
    --code-bg: #0f172a !important;
    --code-border: #1e293b !important;
    --code-text: #f1f5f9 !important;
}

[data-theme="dark"] pre {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

[data-theme="dark"] pre code {
    color: #f1f5f9 !important;
}

/* ============================================
   SCROLLBAR FIXES
   ============================================ */

/* Custom scrollbar for sidebar TOC */
.sticky-top::-webkit-scrollbar {
    width: 6px !important;
}

.sticky-top::-webkit-scrollbar-track {
    background: transparent !important;
}

.sticky-top::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 3px !important;
}

.sticky-top::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   ANIMATION PERFORMANCE FIXES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   HIGH PRIORITY OVERRIDES
   ============================================ */

/* ULTIMATE OVERRIDES - Maximum specificity */
html body .navbar,
html body nav.navbar {
    z-index: 2147483647 !important; /* Maximum z-index value */
    position: fixed !important;
}

/* Force TOC in sidebar only - More specific */
html body .post-content .toc,
html body .post-content #toc,
html body .post-content nav.toc,
html body article .toc,
html body article nav.toc,
html body .col-lg-8 .toc,
html body .col-lg-8 nav.toc,
html body main .toc:not(aside .toc) {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Force code readability - Override everything */
html body pre,
html body pre[class*="language-"] {
    background: #1e293b !important;
    overflow: visible !important;
    position: relative !important;
}

html body pre code,
html body pre[class*="language-"] code,
html body code[class*="language-"] {
    background: transparent !important;
    color: #e2e8f0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-shadow: none !important;
    font-family: "Consolas", "Monaco", "Courier New", monospace !important;
    direction: ltr !important;
    text-align: left !important;
    display: block !important;
    overflow-x: auto !important;
    white-space: pre !important;
}

/* Make sure Prism doesn't override our styles */
.prism-code,
[class*="prism"] {
    background: transparent !important;
}

/* Ensure proper z-index hierarchy */
html body * {
    position: relative;
}

html body .navbar,
html body .navbar * {
    z-index: 2147483647 !important;
}

html body aside .sticky-top,
html body .col-lg-4 .sticky-top {
    z-index: 100 !important;
    position: sticky !important;
    top: 80px !important;
}

/* Ensure TOC doesn't overlap with next block */
.sticky-top {
    align-self: flex-start !important;
}

.sticky-top .toc {
    max-height: calc(100vh - 250px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 0.5rem !important;
}

/* Ensure sidebar doesn't overlap with content below */
aside.col-lg-4 {
    align-self: flex-start !important;
}

/* Additional Prism override */
pre[class*="language-"] {
    background: #1e293b !important;
    margin: 1.5em 0 !important;
    padding: 0 !important;
    overflow: auto !important;
}

code[class*="language-"],
pre[class*="language-"] code {
    color: #e2e8f0 !important;
    background: none !important;
    text-shadow: none !important;
    font-family:
        Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
    font-size: 14px !important;
    text-align: left !important;
    white-space: pre !important;
    word-spacing: normal !important;
    word-break: normal !important;
    word-wrap: normal !important;
    line-height: 1.5 !important;
    padding: 1em !important;
}

/* Dark theme specific for code */
[data-theme="dark"] pre[class*="language-"],
[data-theme="dark"] pre {
    background: #0f172a !important;
}

[data-theme="dark"] code[class*="language-"],
[data-theme="dark"] pre code {
    color: #f8f8f2 !important;
}