/* ============================================
   MAIN THEME & LAYOUT CUSTOMIZATIONS
   ============================================ */

/* Brand colors for header and footer */
footer.bg-primary,
header.bg-primary {
    background-color: #bc3b2f !important;
}

header.bg-primary {
    position: relative !important;
}

/* Clean layout - hide unnecessary elements */
.breadcrumb-item.active,
.row hr.w-100.my-4,
.breadcrumb-item:first-child {
    display: none !important;
}

.breadcrumb-item:first-child + .breadcrumb-item::before {
    content: none !important;
}

/* Spacing adjustments */
.col-12.col-lg-9.pt-5 {
    padding-top: 1rem !important;
}

.rst-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Header layout */
.navbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.logo.navbar-brand {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
}

.logo.navbar-brand .logo-img {
    order: 2 !important;
    margin-left: auto !important;
}

.navbar-toggler {
    order: 1 !important;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

#wagtail-theme {
    position: absolute !important;
    top: 23px !important;
    z-index: 9999 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 6px !important;
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#wagtail-theme:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

/* Icon styling */
#wagtail-theme .dark-only,
#wagtail-theme .light-only {
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

#wagtail-theme .dark-only i,
#wagtail-theme .light-only i {
    font-size: 16px !important;
    display: block !important;
    color: inherit !important;
}

/* Icon toggle logic - show opposite of current mode */
#wagtail-theme .light-only { display: none !important; }
#wagtail-theme .dark-only { display: flex !important; }

/* Dark mode: show moon icon */
[data-bs-theme="dark"] #wagtail-theme .dark-only,
html[data-theme="dark"] #wagtail-theme .dark-only,
body[data-theme="dark"] #wagtail-theme .dark-only,
.theme-dark #wagtail-theme .dark-only {
    display: none !important;
}

[data-bs-theme="dark"] #wagtail-theme .light-only,
html[data-theme="dark"] #wagtail-theme .light-only,
body[data-theme="dark"] #wagtail-theme .light-only,
.theme-dark #wagtail-theme .light-only {
    display: flex !important;
}

@media (prefers-color-scheme: dark) {
    #wagtail-theme .dark-only { display: none !important; }
    #wagtail-theme .light-only { display: flex !important; }
}

/* Theme container positioning */
.col-sm-12.col-lg-auto.mt-3.mt-lg-3 {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    background: transparent !important;
    z-index: 9998 !important;
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

@media (max-width: 991.98px) {
    /* Hide desktop elements */
    nav.col-12.col-lg-3.pb-4,
    aside.col-12.col-lg-3.sidebar-container,
    .navbar-toggler {
        display: none !important;
    }
    
    /* Full width content */
    .col-12.col-lg-9.order-last.order-lg-first.rst-content {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Sidebar toggle buttons */
    #show_left_sidebar,
    #show_right_sidebar {
        display: block !important;
        position: fixed !important;
        background: #e74c3c !important;
        border-radius: 5px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        z-index: 1050 !important;
    }
    
    #show_left_sidebar {
        top: 80px !important;
        left: 10px !important;
    }
    
    #show_right_sidebar {
        bottom: 20px !important;
        right: 20px !important;
    }
    
    #show_left_sidebar.hide,
    #show_right_sidebar.hide {
        display: none !important;
    }
    
    #show_left_sidebar p,
    #show_right_sidebar p {
        margin: 0 !important;
    }
    
    #show_left_sidebar a,
    #show_right_sidebar a {
        display: block !important;
        padding: 12px 15px !important;
        color: white !important;
        text-decoration: none !important;
        font-weight: bold !important;
    }
    
    #show_left_sidebar .icon,
    #show_right_sidebar .icon {
        margin-right: 8px !important;
    }
    
    /* Sidebar containers */
    #left_sidebar,
    #right_sidebar {
        position: fixed !important;
        top: 0 !important;
        height: 100vh !important;
        width: 300px !important;
        background: white !important;
        z-index: 1040 !important;
        overflow-y: auto !important;
        transition: transform 0.3s ease !important;
    }
    
    #left_sidebar {
        left: 0 !important;
        transform: translateX(-100%) !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.3) !important;
    }
    
    #right_sidebar {
        right: 0 !important;
        transform: translateX(100%) !important;
        box-shadow: -2px 0 10px rgba(0,0,0,0.3) !important;
    }
    
    #left_sidebar.show {
        transform: translateX(0) !important;
    }
    
    #right_sidebar.show {
        transform: translateX(0) !important;
    }
    
    /* Sidebar headers */
    #left_sidebar > p,
    #right_sidebar > p {
        background: #bc3b2f !important;
        color: white !important;
        padding: 15px 20px !important;
        margin: 0 !important;
        border-bottom: 1px solid #eee !important;
    }
    
    #left_sidebar > p a,
    #right_sidebar > p a {
        color: white !important;
        text-decoration: none !important;
        font-weight: bold !important;
    }
    
    #left_sidebar .icon,
    #right_sidebar .icon {
        margin-right: 8px !important;
    }
    
    /* Sidebar content */
    #left_sidebar .page_nav,
    #right_sidebar .page_toc {
        padding: 20px !important;
    }
    
    /* Search boxes */
    #left_sidebar .page_nav #mobile-searchbox,
    #left_sidebar .page_nav #searchbox {
        margin-bottom: 20px !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    #left_sidebar .page_nav #mobile-searchbox .input-group,
    #left_sidebar .page_nav #searchbox .input-group {
        width: 100% !important;
        display: flex !important;
    }
    
    #left_sidebar .page_nav #mobile-searchbox input[type="search"],
    #left_sidebar .page_nav input[type="search"] {
        padding: 8px 12px !important;
        border: 1px solid #ddd !important;
        font-size: 14px !important;
        display: block !important;
        height: 38px !important;
        box-sizing: border-box !important;
        background: white !important;
        color: #333 !important;
    }
    
    #left_sidebar .page_nav #mobile-searchbox input[type="search"] {
        flex: 1 !important;
        border-radius: 0 4px 4px 0 !important;
        border-left: none !important;
        min-width: 0 !important;
    }
    
    #left_sidebar .page_nav input[type="search"]:not(#mobile-searchbox input[type="search"]) {
        width: 100% !important;
        border-radius: 4px !important;
    }
    
    #left_sidebar .page_nav #mobile-searchbox .input-group-text {
        background: white !important;
        border: 1px solid #ddd !important;
        padding: 8px 12px !important;
        display: flex !important;
        border-radius: 4px 0 0 4px !important;
        border-right: none !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        box-sizing: border-box !important;
        color: #333 !important;
    }
    
    #left_sidebar .page_nav .input-group-text:not(#mobile-searchbox .input-group-text) {
        background: #f8f9fa !important;
        border: 1px solid #ddd !important;
        padding: 8px 12px !important;
        display: flex !important;
    }
    
    /* Navigation structure */
    #left_sidebar .page_nav .collapse,
    #left_sidebar .page_nav .site-toc {
        display: block !important;
    }
    
    #left_sidebar .page_nav ul,
    #right_sidebar .page_toc ul {
        margin: 0 !important;
        padding-left: 0 !important;
        list-style: none !important;
    }
    
    #left_sidebar .page_nav li,
    #right_sidebar .page_toc li {
        margin: 8px 0 !important;
    }
    
    #left_sidebar .page_nav li ul,
    #right_sidebar .page_toc li ul {
        padding-left: 20px !important;
        margin-top: 5px !important;
    }
    
    #left_sidebar .page_nav a,
    #right_sidebar .page_toc a {
        color: #333 !important;
        text-decoration: none !important;
        padding: 5px 0 !important;
        display: block !important;
        border-radius: 3px !important;
    }
    
    #left_sidebar .page_nav a:hover,
    #right_sidebar .page_toc a:hover {
        color: #bc3b2f !important;
        background: #f8f9fa !important;
        padding-left: 10px !important;
        transition: all 0.2s ease !important;
    }
}

/* Hide mobile elements on desktop */
@media (min-width: 992px) {
    #show_left_sidebar,
    #left_sidebar,
    #show_right_sidebar,
    #right_sidebar {
        display: none !important;
    }
}

/* ============================================
   DARK MODE FOR MOBILE SIDEBARS
   ============================================ */

/* Dark mode styles for mobile sidebars */
@media (prefers-color-scheme: dark) {
    @media (max-width: 991.98px) {
        /* Left sidebar dark mode */
        #left_sidebar {
            background: #1a1a1a !important;
            color: #e0e0e0 !important;
        }
        
        #left_sidebar > p {
            background: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-bottom: 1px solid #444 !important;
        }
        
        #left_sidebar > p a {
            color: #e0e0e0 !important;
        }
        
        #left_sidebar .page_nav {
            background: #1a1a1a !important;
        }
        
        /* Search box dark mode */
        #left_sidebar .page_nav #mobile-searchbox input[type="search"] {
            background: #2d2d2d !important;
            border: 1px solid #555 !important;
            color: #e0e0e0 !important;
        }
        
        #left_sidebar .page_nav #mobile-searchbox input[type="search"]:focus {
            background: #333 !important;
            border-color: #666 !important;
        }
        
        #left_sidebar .page_nav #mobile-searchbox .input-group-text {
            background: #2d2d2d !important;
            border: 1px solid #555 !important;
            color: #e0e0e0 !important;
        }
        
        /* Navigation links dark mode */
        #left_sidebar .page_nav a {
            color: #e0e0e0 !important;
        }
        
        #left_sidebar .page_nav a:hover {
            color: #ff6b6b !important;
            background: #333 !important;
        }
        
        /* Right sidebar dark mode */
        #right_sidebar {
            background: #1a1a1a !important;
            color: #e0e0e0 !important;
        }
        
        #right_sidebar > p {
            background: #2d2d2d !important;
            color: #e0e0e0 !important;
            border-bottom: 1px solid #444 !important;
        }
        
        #right_sidebar > p a {
            color: #e0e0e0 !important;
        }
        
        #right_sidebar .page_toc {
            background: #1a1a1a !important;
        }
        
        #right_sidebar .page_toc a {
            color: #e0e0e0 !important;
        }
        
        #right_sidebar .page_toc a:hover {
            color: #ff6b6b !important;
            background: #333 !important;
        }
    }
}

/* Alternative dark mode detection - body/html classes */
@media (max-width: 991.98px) {
    html[data-theme="dark"] #left_sidebar,
    body.dark-mode #left_sidebar,
    body.force-dark-mode #left_sidebar,
    .dark-theme #left_sidebar,
    #left_sidebar.dark-theme {
        background: #1a1a1a !important;
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #left_sidebar > p,
    body.dark-mode #left_sidebar > p,
    body.force-dark-mode #left_sidebar > p,
    .dark-theme #left_sidebar > p,
    #left_sidebar.dark-theme > p {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-bottom: 1px solid #444 !important;
    }

    html[data-theme="dark"] #left_sidebar > p a,
    body.dark-mode #left_sidebar > p a,
    body.force-dark-mode #left_sidebar > p a,
    .dark-theme #left_sidebar > p a,
    #left_sidebar.dark-theme > p a {
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #left_sidebar .page_nav,
    body.dark-mode #left_sidebar .page_nav,
    body.force-dark-mode #left_sidebar .page_nav,
    .dark-theme #left_sidebar .page_nav,
    #left_sidebar.dark-theme .page_nav {
        background: #1a1a1a !important;
    }

    html[data-theme="dark"] #left_sidebar .page_nav #mobile-searchbox input[type="search"],
    body.dark-mode #left_sidebar .page_nav #mobile-searchbox input[type="search"],
    body.force-dark-mode #left_sidebar .page_nav #mobile-searchbox input[type="search"],
    .dark-theme #left_sidebar .page_nav #mobile-searchbox input[type="search"],
    #left_sidebar.dark-theme .page_nav #mobile-searchbox input[type="search"] {
        background: #2d2d2d !important;
        border: 1px solid #555 !important;
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #left_sidebar .page_nav #mobile-searchbox .input-group-text,
    body.dark-mode #left_sidebar .page_nav #mobile-searchbox .input-group-text,
    body.force-dark-mode #left_sidebar .page_nav #mobile-searchbox .input-group-text,
    .dark-theme #left_sidebar .page_nav #mobile-searchbox .input-group-text,
    #left_sidebar.dark-theme .page_nav #mobile-searchbox .input-group-text {
        background: #2d2d2d !important;
        border: 1px solid #555 !important;
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #left_sidebar .page_nav a,
    body.dark-mode #left_sidebar .page_nav a,
    body.force-dark-mode #left_sidebar .page_nav a,
    .dark-theme #left_sidebar .page_nav a,
    #left_sidebar.dark-theme .page_nav a {
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #left_sidebar .page_nav a:hover,
    body.dark-mode #left_sidebar .page_nav a:hover,
    body.force-dark-mode #left_sidebar .page_nav a:hover,
    .dark-theme #left_sidebar .page_nav a:hover,
    #left_sidebar.dark-theme .page_nav a:hover {
        color: #ff6b6b !important;
        background: #333 !important;
    }

    html[data-theme="dark"] #right_sidebar,
    body.dark-mode #right_sidebar,
    body.force-dark-mode #right_sidebar,
    .dark-theme #right_sidebar,
    #right_sidebar.dark-theme {
        background: #1a1a1a !important;
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #right_sidebar > p,
    body.dark-mode #right_sidebar > p,
    body.force-dark-mode #right_sidebar > p,
    .dark-theme #right_sidebar > p,
    #right_sidebar.dark-theme > p {
        background: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-bottom: 1px solid #444 !important;
    }

    html[data-theme="dark"] #right_sidebar > p a,
    body.dark-mode #right_sidebar > p a,
    body.force-dark-mode #right_sidebar > p a,
    .dark-theme #right_sidebar > p a,
    #right_sidebar.dark-theme > p a {
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #right_sidebar .page_toc,
    body.dark-mode #right_sidebar .page_toc,
    body.force-dark-mode #right_sidebar .page_toc,
    .dark-theme #right_sidebar .page_toc,
    #right_sidebar.dark-theme .page_toc {
        background: #1a1a1a !important;
    }

    html[data-theme="dark"] #right_sidebar .page_toc a,
    body.dark-mode #right_sidebar .page_toc a,
    body.force-dark-mode #right_sidebar .page_toc a,
    .dark-theme #right_sidebar .page_toc a,
    #right_sidebar.dark-theme .page_toc a {
        color: #e0e0e0 !important;
    }

    html[data-theme="dark"] #right_sidebar .page_toc a:hover,
    body.dark-mode #right_sidebar .page_toc a:hover,
    body.force-dark-mode #right_sidebar .page_toc a:hover,
    .dark-theme #right_sidebar .page_toc a:hover,
    #right_sidebar.dark-theme .page_toc a:hover {
        color: #ff6b6b !important;
        background: #333 !important;
    }
}

/* ============================================
   ADMONITION STYLING
   ============================================ */

/* Base styling */
.admonition {
    margin: 1.5rem 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

.admonition .admonition-title {
    font-weight: 600 !important;
    font-size: 1.1em !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
}

.admonition > *:not(.admonition-title) {
    padding: 16px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Collapsible functionality */
.admonition.toggle .admonition-title {
    cursor: pointer !important;
    position: relative !important;
    user-select: none !important;
    padding-right: 120px !important;
}

.admonition.toggle button.toggle-button {
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.admonition.toggle button.toggle-button .tb-icon {
    display: none !important;
}

.admonition.toggle button.toggle-button::before {
    content: attr(data-toggle-hint) !important;
    font-size: 0.8em !important;
    color: white !important;
    opacity: 0.9 !important;
    white-space: nowrap !important;
    order: 1 !important;
}

.admonition.toggle button.toggle-button::after {
    content: "▼" !important;
    font-size: 0.9em !important;
    color: white !important;
    transition: transform 0.3s ease !important;
    order: 2 !important;
}

.admonition.toggle button.toggle-button-hidden::after {
    transform: rotate(-90deg) !important;
}

.admonition.toggle .admonition-title:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* Color themes */
.admonition.note .admonition-title { background: linear-gradient(135deg, #3498db, #2980b9) !important; }
.admonition.note { border-left: 4px solid #3498db !important; }

.admonition.tip .admonition-title { background: linear-gradient(135deg, #27ae60, #229954) !important; }
.admonition.tip { border-left: 4px solid #27ae60 !important; }

.admonition.warning .admonition-title { background: linear-gradient(135deg, #f39c12, #e67e22) !important; }
.admonition.warning { border-left: 4px solid #f39c12 !important; }

.admonition.danger .admonition-title,
.admonition.error .admonition-title { background: linear-gradient(135deg, #e74c3c, #c0392b) !important; }
.admonition.danger,
.admonition.error { border-left: 4px solid #e74c3c !important; }

.admonition.important .admonition-title { background: linear-gradient(135deg, #9b59b6, #8e44ad) !important; }
.admonition.important { border-left: 4px solid #9b59b6 !important; }

/* Generic/custom admonitions */
.admonition:not(.note):not(.tip):not(.warning):not(.danger):not(.error):not(.important) .admonition-title {
    background: linear-gradient(135deg, #bc3b2f, #a0332a) !important;
}
.admonition:not(.note):not(.tip):not(.warning):not(.danger):not(.error):not(.important) {
    border-left: 4px solid #bc3b2f !important;
}

/* Dark mode for admonitions */
@media (prefers-color-scheme: dark) {
    .admonition > *:not(.admonition-title) {
        background: rgba(45, 45, 45, 0.95) !important;
        color: #e0e0e0 !important;
    }
    
    .admonition {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
}

html[data-theme="dark"] .admonition > *:not(.admonition-title),
body.dark-mode .admonition > *:not(.admonition-title),
.dark-theme .admonition > *:not(.admonition-title) {
    background: rgba(45, 45, 45, 0.95) !important;
    color: #e0e0e0 !important;
}

html[data-theme="dark"] .admonition,
body.dark-mode .admonition,
.dark-theme .admonition {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Animation for collapsible content */
.admonition.toggle > *:not(.admonition-title) {
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.admonition.toggle.collapsed > *:not(.admonition-title) {
    max-height: 0 !important;
    padding: 0 16px !important;
    opacity: 0 !important;
}