/* Custom CSS for Sphinx Book Theme - Blue theme with animations */

/* ========== Theme Color Configuration ========== */
:root {
    --primary-color: #2563eb;      /* Primary blue */
    --secondary-color: #1e40af;    /* Deep blue */
    --accent-color: #3b82f6;       /* Bright blue */
    --light-blue: #dbeafe;         /* Light blue background */
    --dark-blue: #1e3a8a;          /* Dark blue */
    --gradient-blue: linear-gradient(135deg, #2563eb, #3b82f6);
    --gradient-blue-deep: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
    --gradient-blue-light: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);
    --shadow-blue: rgba(37, 99, 235, 0.3);
    --shadow-blue-light: rgba(37, 99, 235, 0.15);
    --shadow-blue-hover: rgba(37, 99, 235, 0.5);
}

/* ========== Main Page Container Styles ========== */
.bd-main .bd-content .bd-article-container {
    background: var(--gradient-blue-light);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 8px 30px var(--shadow-blue-light),
                0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible; /* Fix: allow content overflow */
}

.bd-main .bd-content .bd-article-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-blue-deep);
    z-index: 1;
}

/* ========== Navbar Styles ========== */
.bd-header {
    background: var(--gradient-blue-deep) !important;
    border-bottom: 3px solid var(--dark-blue);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px var(--shadow-blue);
}

.bd-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 35px var(--shadow-blue-hover);
}

/* ========== Header Button Area Alignment ========== */
.bd-header-article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 60px;
    padding: 0.5rem 1rem;
}

.header-article-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-article-items__start,
.header-article-items__end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-article-items__end {
    margin-left: auto;
}

/* Article header button area */
.article-header-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Common styles for all header buttons */
.article-header-buttons .btn,
.article-header-buttons .dropdown-toggle {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: auto !important;
    white-space: nowrap !important;
}

.article-header-buttons .btn:hover,
.article-header-buttons .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    color: white !important;
}

/* Special styles for theme switch button */
.theme-switch-button {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    padding: 0.5rem 0.8rem !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    height: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    width: auto !important;
    white-space: nowrap !important;
}

.theme-switch-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    color: white !important;
}

/* Ensure button icon colors are correct */
.article-header-buttons .btn i,
.article-header-buttons .dropdown-toggle i,
.theme-switch-button i {
    color: white !important;
}

/* Hide specific buttons in dropdown menus */
.dropdown-source-buttons .btn-source-file-button,
.dropdown-source-buttons .btn-source-edit-button {
    display: none !important;
}

/* Ensure all header buttons are vertically aligned */
.bd-navbar,
.bd-navbar .navbar-nav,
.bd-header .navbar-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ========== Sidebar Styles ========== */
.bd-sidebar-primary {
    background: var(--gradient-blue-light);
    border-right: 3px solid white;
    box-shadow: 4px 0 15px var(--shadow-blue-light);
    position: relative;
}

/* ========== Tutorial Hub Cards ========== */
.skyborn-tutorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.skyborn-tutorial-card {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(30, 144, 255, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.98) 100%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.skyborn-tutorial-card::after {
    display: none !important;
}

.skyborn-tutorial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    border-color: rgba(30, 144, 255, 0.35);
    text-decoration: none;
    color: inherit !important;
    text-shadow: none !important;
}

.skyborn-tutorial-card h2 {
    margin: 0.15rem 0 0.55rem;
    font-size: 1.12rem;
    line-height: 1.3;
}

.skyborn-tutorial-card h2::before {
    display: none !important;
}

.skyborn-tutorial-card h2:hover {
    transform: none !important;
    text-shadow: none !important;
    color: var(--secondary-color) !important;
}

.skyborn-tutorial-card p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.skyborn-tutorial-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #dbeafe;
    border-bottom: 1px solid rgba(30, 144, 255, 0.12);
}

.skyborn-tutorial-card__body {
    display: block;
    padding: 1rem 1.15rem 1.1rem;
}

.skyborn-tutorial-card__cover,
.skyborn-tutorial-card__cover:hover {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    cursor: default !important;
    transform: none;
    transition: transform 0.28s ease !important;
}

.skyborn-tutorial-card:hover .skyborn-tutorial-card__cover {
    transform: scale(1.04) !important;
}

.skyborn-tutorial-card__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.skyborn-tutorial-card__meta {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.08);
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f766e;
}

[data-theme="dark"] .skyborn-tutorial-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(22, 30, 48, 0.98) 100%);
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.34);
}

[data-theme="dark"] .skyborn-tutorial-card:hover {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
}

[data-theme="dark"] .skyborn-tutorial-card__media {
    background: #1e293b;
    border-bottom-color: rgba(96, 165, 250, 0.18);
}

[data-theme="dark"] .skyborn-tutorial-card p {
    color: #cbd5e1;
}

[data-theme="dark"] .skyborn-tutorial-card__eyebrow {
    color: #93c5fd;
}

[data-theme="dark"] .skyborn-tutorial-card__meta {
    background: rgba(94, 234, 212, 0.12);
    color: #5eead4;
}

.bd-sidebar-primary .skyborn-tutorials-root > details {
    display: none !important;
}

.bd-sidebar-primary::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: white;
    z-index: 1;
}

.bd-sidebar-primary .bd-sidebar {
    background: transparent;
}

/* Make all sidebar text bold */
.bd-sidebar-primary,
.bd-sidebar-primary a,
.bd-sidebar-primary .toctree-l1 > a,
.bd-sidebar-primary .toctree-l2 > a,
.bd-sidebar-primary .caption,
.bd-sidebar-primary .caption-text,
.bd-sidebar-primary li,
.bd-sidebar-primary p,
.bd-sidebar-primary span {
    font-weight: 700 !important; /* Use a bolder font */
}

/* Sidebar link hover effect */
.bd-sidebar-primary .toctree-l1 > a {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 8px;
    margin: 4px 8px;
    padding: 8px 16px;
    position: relative;
    overflow: hidden;
}

.bd-sidebar-primary .toctree-l1 > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-blue);
    transition: left 0.4s ease;
    z-index: -1;
}

.bd-sidebar-primary .toctree-l1 > a:hover::before {
    left: 0;
}

.bd-sidebar-primary .toctree-l1 > a:hover {
    color: white !important;
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 6px 20px var(--shadow-blue);
}

/* ========== Notebook Image Enhancements ========== */
.nboutput img,
.cell_output img {
    max-width: 85% !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border: 3px solid var(--light-blue);
    border-radius: 16px;
    padding: 15px;
    background: var(--gradient-blue-light);
    box-shadow: 0 10px 40px var(--shadow-blue-light),
                0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    cursor: pointer;
}

.nboutput img::before,
.cell_output img::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: var(--gradient-blue-deep);
    border-radius: 16px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nboutput img:hover::before,
.cell_output img:hover::before {
    opacity: 1;
}

.nboutput img:hover,
.cell_output img:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 60px var(--shadow-blue),
                0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

/* ========== General Image Styles - apply notebook image effects to all images ========== */
/* Exclude notebook images because they already have specific styles */
img:not(.nboutput img):not(.cell_output img):not(.bd-header img):not(.bd-sidebar img) {
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border: 3px solid var(--light-blue);
    border-radius: 16px;
    padding: 15px;
    background: var(--gradient-blue-light);
    box-shadow: 0 10px 40px var(--shadow-blue-light),
                0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    cursor: pointer;
}

/* Hover foreground effect for general images */
img:not(.nboutput img):not(.cell_output img):not(.bd-header img):not(.bd-sidebar img)::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: var(--gradient-blue-deep);
    border-radius: 16px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hover effect for general images */
img:not(.nboutput img):not(.cell_output img):not(.bd-header img):not(.bd-sidebar img):hover::before {
    opacity: 1;
}

img:not(.nboutput img):not(.cell_output img):not(.bd-header img):not(.bd-sidebar img):hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 60px var(--shadow-blue),
                0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

/* Special handling: images in documents */
.bd-content img,
.bd-article img,
article img,
.document img {
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border: 3px solid var(--light-blue);
    border-radius: 16px;
    padding: 15px;
    background: var(--gradient-blue-light);
    box-shadow: 0 10px 40px var(--shadow-blue-light),
                0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    cursor: pointer;
}

.bd-content img::before,
.bd-article img::before,
article img::before,
.document img::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: var(--gradient-blue-deep);
    border-radius: 16px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bd-content img:hover::before,
.bd-article img:hover::before,
article img:hover::before,
.document img:hover::before {
    opacity: 1;
}

.bd-content img:hover,
.bd-article img:hover,
article img:hover,
.document img:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 60px var(--shadow-blue),
                0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

/* Exclude small icons and decorative images */
.bd-header img,
.bd-sidebar img,
.bd-footer img,
img[width="16"],
img[width="20"],
img[width="24"],
img[width="32"],
img[height="16"],
img[height="20"],
img[height="24"],
img[height="32"],
.icon img,
.logo img {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transition: none !important;
    cursor: default !important;
    margin: 0 !important;
    max-width: none !important;
    display: inline !important;
}

/* Figure caption styles */
.figure-caption,
.caption,
figcaption {
    text-align: center !important;
    font-style: italic !important;
    color: var(--secondary-color) !important;
    margin-top: 1rem !important;
    font-size: 0.9em !important;
}

/* ========== Code Block Styles ========== */
.nbinput .highlight pre,
.nboutput .highlight pre,
.cell_input .highlight pre,
.cell_output .highlight pre {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px var(--shadow-blue-light),
                0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.nbinput .highlight pre::before,
.cell_input .highlight pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-blue-deep);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

.nbinput .highlight pre:hover::before,
.cell_input .highlight pre:hover::before {
    transform: scaleY(1);
}

.nbinput .highlight pre:hover,
.cell_input .highlight pre:hover {
    transform: translateX(8px) translateY(-2px);
    box-shadow: 0 8px 30px var(--shadow-blue),
                0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Input cells: blue theme */
.cell_input {
    background: var(--gradient-blue-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px var(--shadow-blue-light);
    position: relative;
    overflow: hidden;
}

.cell_input::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.cell_input:hover::before {
    left: 100%;
}

.cell_input:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 40px var(--shadow-blue),
                0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Output cells: teal/green theme */
.cell_output {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    margin-bottom: 1.2rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
    position: relative;
    overflow: hidden;
}

.cell_output::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.cell_output:hover::before {
    left: 100%;
}

.cell_output:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.3),
                0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ========== Button Styles ========== */
/* Exclude header buttons from global button styles */
.btn:not(.bd-header .btn):not(.bd-navbar .btn),
.bd-button:not(.bd-header .bd-button):not(.bd-navbar .bd-button) {
    background: white !important;
    border: none !important;
    border-radius: 10px !important;
    color: var(--primary-color) !important;
    padding: 0.6rem 1.2rem !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px var(--shadow-blue) !important;
    font-weight: 500 !important;
}

.btn:not(.bd-header .btn):not(.bd-navbar .btn)::before,
.bd-button:not(.bd-header .bd-button):not(.bd-navbar .bd-button)::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn:not(.bd-header .btn):not(.bd-navbar .btn):hover::before,
.bd-button:not(.bd-header .bd-button):not(.bd-navbar .bd-button):hover::before {
    left: 100%;
}

.btn:not(.bd-header .btn):not(.bd-navbar .btn):hover,
.bd-button:not(.bd-header .bd-button):not(.bd-navbar .bd-button):hover {
    background: var(--primary-color) !important;
    color: white !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 12px 35px var(--shadow-blue-hover) !important;
}

/* Button click animation */
.btn:not(.bd-header .btn):not(.bd-navbar .btn):active,
.bd-button:not(.bd-header .bd-button):not(.bd-navbar .bd-button):active {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 20px var(--shadow-blue) !important;
}

/* ========== Link Styles ========== */
a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-blue);
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

a:hover {
    color: var(--secondary-color) !important;
    text-shadow: 0 0 12px var(--shadow-blue) !important;
    transform: translateY(-1px) !important;
}

/* ========== Heading Styles ========== */
h1, h2, h3, h4, h5, h6 {
    color: var(--secondary-color) !important;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
}

h1::before, h2::before, h3::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--gradient-blue-deep);
    transition: height 0.3s ease;
    border-radius: 2px;
}

h1:hover::before, h2:hover::before, h3:hover::before {
    height: 70%;
}

h1:hover, h2:hover, h3:hover {
    transform: translateX(8px) !important;
    color: var(--primary-color) !important;
    text-shadow: 0 4px 12px var(--shadow-blue) !important;
}

/* ========== Responsive Design ========== */
@media (max-width: 768px) {
    .skyborn-tutorial-grid {
        grid-template-columns: 1fr;
    }

    .skyborn-tutorial-card__media {
        aspect-ratio: 16 / 9;
    }

    .nboutput img,
    .cell_output img {
        max-width: 95% !important;
        margin: 0.5rem auto !important;
    }

    .bd-main .bd-content .bd-article-container {
        padding: 1rem;
    }
}

/* ========== Animation Keyframes ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Page load animation */
.bd-article {
    animation: fadeInUp 0.6s ease-out;
}

/* Notebook cell entrance animation */
.cell {
    animation: fadeInUp 0.4s ease-out;
    margin-bottom: 1.8rem;
}

/* ========== Scrollbar Styles ========== */
/* Global scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Scrollbar track */
::-webkit-scrollbar-track {
    background: var(--light-blue);
    border-radius: 6px;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: #6b7280 !important; /* Gray thumb */
    border-radius: 6px;
    border: 2px solid var(--light-blue);
    transition: background 0.3s ease;
}

/* Scrollbar thumb hover effect */
::-webkit-scrollbar-thumb:hover {
    background: #4b5563 !important; /* Darker gray on hover */
}

/* Sidebar-specific scrollbar */
.bd-sidebar-primary ::-webkit-scrollbar {
    width: 8px;
}

.bd-sidebar-primary ::-webkit-scrollbar-track {
    background: transparent;
}

.bd-sidebar-primary ::-webkit-scrollbar-thumb {
    background: #9ca3af !important; /* Light gray thumb */
    border-radius: 4px;
    border: none;
}

.bd-sidebar-primary ::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important; /* Dark gray on hover */
}

/* Firefox scrollbar styles */
* {
    scrollbar-width: thin;
    scrollbar-color: #6b7280 var(--light-blue);
}

.bd-sidebar-primary * {
    scrollbar-color: #9ca3af transparent;
}

/* ========== Text Overflow Handling ========== */
/* Prevent text overflow */
.bd-content {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Text handling for API and code docs */
.sig-name,
.sig-prename,
.highlight .n,
.highlight .na,
.highlight .nb,
.highlight .nc,
.highlight .no,
.highlight .nd,
.highlight .ni,
.highlight .ne,
.highlight .nf,
.highlight .nl,
.highlight .nn,
.highlight .nt,
.highlight .nv {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
}

/* Handling function signatures and parameters */
.sig-param {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    display: inline-block !important;
}

/* Handle long lines inside code blocks */
.highlight pre,
.highlight code,
pre,
code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
}

/* Table content handling - fix table display issues */
.bd-article-container table {
    table-layout: auto !important;
    width: 100% !important;
    max-width: none !important;
    overflow-x: visible !important;
    display: table !important; /* Fix: keep normal table display */
    white-space: normal !important; /* Fix: allow normal wrapping */
    border-collapse: collapse !important;
}

.bd-article-container table td,
.bd-article-container table th {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: none !important; /* Fix: remove max-width constraint */
    overflow: visible !important; /* Fix: allow content to show */
    text-overflow: clip !important; /* Fix: don't clip text */
    vertical-align: top !important;
    padding: 8px !important;
}

/* Handling long URLs and links */
a[href] {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Document titles and labels handling */
.sig-prename,
.descname {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Parameter list handling */
.field-list,
.field-list .field-name,
.field-list .field-body {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Special handling for notebook cell content */
.nbinput .highlight pre,
.nboutput .highlight pre,
.cell_input .highlight pre,
.cell_output .highlight pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--primary-color) var(--light-blue) !important;
}

/* Inline code handling */
code {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    background-color: #f8fafc !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    border: 1px solid var(--light-blue) !important;
}

/* Text handling for admonitions */
.admonition,
.attention,
.caution,
.danger,
.error,
.hint,
.important,
.note,
.seealso,
.tip,
.warning {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Fix long function names in API docs */
.signature {
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding: 10px !important;
    border-radius: 6px !important;
    border-left: 4px solid var(--primary-color) !important;
    margin: 10px 0 !important;
}

/* Responsive tables */
.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Ensure containers don't overflow the viewport */
.bd-article-container,
.bd-content,
.bd-main {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Mobile-specific handling */
@media (max-width: 768px) {
    table td,
    table th {
        max-width: 120px !important;
        font-size: 0.9em !important;
    }

    .signature {
        font-size: 0.8em !important;
        padding: 8px !important;
    }

    code {
        font-size: 0.85em !important;
        padding: 1px 3px !important;
    }
}

/* Dropdown menu styles - ensure sub-buttons have consistent width */
.article-header-buttons .dropdown-menu {
    z-index: 1050 !important;
    position: absolute !important;
    background: white !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    min-width: 120px !important;
    overflow: visible !important;
    padding: 0.5rem 0 !important;
}

.article-header-buttons .dropdown-item {
    color: var(--primary-color) !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.3s ease !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    white-space: nowrap !important;
    border: none !important;
    background: none !important;
}

.article-header-buttons .dropdown-item:hover {
    background: var(--light-blue) !important;
    color: var(--secondary-color) !important;
}

/* Ensure dropdown button container isn't clipped */
.bd-header .navbar-nav,
.bd-header .nav-item,
.dropdown {
    overflow: visible !important;
    height: auto !important;
}

/* ========== Dark Mode Support ========== */
/* Theme colors for dark mode */
[data-theme="dark"] {
    --primary-color: #60a5fa;      /* Light blue primary color */
    --secondary-color: #3b82f6;    /* Medium blue */
    --accent-color: #1d4ed8;       /* Deep blue */
    --light-blue: #1e293b;         /* Dark background */
    --dark-blue: #0f172a;          /* Deeper background */
    --gradient-blue: linear-gradient(135deg, #1e293b, #334155);
    --gradient-blue-deep: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --gradient-blue-light: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    --shadow-blue: rgba(96, 165, 250, 0.2);
    --shadow-blue-light: rgba(96, 165, 250, 0.1);
    --shadow-blue-hover: rgba(96, 165, 250, 0.3);
}

/* Page styles under dark mode */
[data-theme="dark"] .bd-main .bd-content .bd-article-container {
    background: var(--gradient-blue-light) !important;
    color: #e2e8f0 !important;
}

/* Navbar styles under dark mode */
[data-theme="dark"] .bd-header {
    background: var(--gradient-blue-deep) !important;
    border-bottom: 3px solid var(--dark-blue) !important;
}

/* Sidebar styles under dark mode */
[data-theme="dark"] .bd-sidebar-primary {
    background: var(--gradient-blue-light) !important;
    border-right: 3px solid #334155 !important;
}

[data-theme="dark"] .bd-sidebar-primary::before {
    background: #334155 !important;
}

/* Sidebar text color under dark mode */
[data-theme="dark"] .bd-sidebar-primary,
[data-theme="dark"] .bd-sidebar-primary a,
[data-theme="dark"] .bd-sidebar-primary .toctree-l1 > a,
[data-theme="dark"] .bd-sidebar-primary .toctree-l2 > a,
[data-theme="dark"] .bd-sidebar-primary .caption,
[data-theme="dark"] .bd-sidebar-primary .caption-text,
[data-theme="dark"] .bd-sidebar-primary li,
[data-theme="dark"] .bd-sidebar-primary p,
[data-theme="dark"] .bd-sidebar-primary span {
    color: #e2e8f0 !important;
}

/* Code block styles under dark mode */
[data-theme="dark"] .nbinput .highlight pre,
[data-theme="dark"] .nboutput .highlight pre,
[data-theme="dark"] .cell_input .highlight pre,
[data-theme="dark"] .cell_output .highlight pre {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #e2e8f0 !important;
}

/* Input cells under dark mode */
[data-theme="dark"] .cell_input {
    background: var(--gradient-blue-light) !important;
    border-left: 4px solid var(--primary-color) !important;
}

/* Output cells under dark mode */
[data-theme="dark"] .cell_output {
    background: linear-gradient(135deg, #134e4a 0%, #1f2937 50%, #374151 100%) !important;
    border-left: 4px solid #3b82f6 !important;
}

/* Heading styles under dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #f1f5f9 !important;
}

/* Link styles under dark mode */
[data-theme="dark"] a {
    color: var(--primary-color) !important;
}

/* Button styles under dark mode */
[data-theme="dark"] .btn:not(.bd-header .btn):not(.bd-navbar .btn),
[data-theme="dark"] .bd-button:not(.bd-header .bd-button):not(.bd-navbar .bd-button) {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4b5563 !important;
}

[data-theme="dark"] .btn:not(.bd-header .btn):not(.bd-navbar .btn):hover,
[data-theme="dark"] .bd-button:not(.bd-header .bd-button):not(.bd-navbar .bd-button):hover {
    background: var(--primary-color) !important;
    color: #1e293b !important;
}

/* Dropdown menu styles under dark mode */
[data-theme="dark"] .article-header-buttons .dropdown-menu {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
}

[data-theme="dark"] .article-header-buttons .dropdown-item {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .article-header-buttons .dropdown-item:hover {
    background: #4b5563 !important;
    color: var(--primary-color) !important;
}

/* Image styles under dark mode */
[data-theme="dark"] .nboutput img,
[data-theme="dark"] .cell_output img {
    border: 3px solid #4b5563 !important;
    background: var(--gradient-blue-light) !important;
}

[data-theme="dark"] img:not(.nboutput img):not(.cell_output img):not(.bd-header img):not(.bd-sidebar img),
[data-theme="dark"] .bd-content img,
[data-theme="dark"] .bd-article img,
[data-theme="dark"] article img,
[data-theme="dark"] .document img {
    border: 3px solid #4b5563 !important;
    background: var(--gradient-blue-light) !important;
}

/* Scrollbar styles under dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
    border: 2px solid #1e293b !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

/* Firefox scrollbar under dark mode */
[data-theme="dark"] * {
    scrollbar-color: #4b5563 #1e293b !important;
}

/* Inline code under dark mode */
[data-theme="dark"] code {
    background-color: #374151 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4b5563 !important;
}

/* Admonitions under dark mode */
[data-theme="dark"] .admonition,
[data-theme="dark"] .attention,
[data-theme="dark"] .caution,
[data-theme="dark"] .danger,
[data-theme="dark"] .error,
[data-theme="dark"] .hint,
[data-theme="dark"] .important,
[data-theme="dark"] .note,
[data-theme="dark"] .seealso,
[data-theme="dark"] .tip,
[data-theme="dark"] .warning {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border: 1px solid #4b5563 !important;
}

/* Table styles under dark mode */
[data-theme="dark"] table {
    background: #374151 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] table td,
[data-theme="dark"] table th {
    border: 1px solid #4b5563 !important;
    background: #374151 !important;
    color: #e2e8f0 !important;
}

/* Figure caption under dark mode */
[data-theme="dark"] .figure-caption,
[data-theme="dark"] .caption,
[data-theme="dark"] figcaption {
    color: #94a3b8 !important;
}

/* ========== Last Updated Date Styling ========== */
.last-updated {
    font-size: 0.85em;
    color: var(--pst-color-text-muted);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pst-color-border);
    text-align: center;
}

.last-updated:before {
    content: "📅 ";
    margin-right: 0.5rem;
}

/* Dark mode support for last updated */
[data-theme="dark"] .last-updated {
    color: var(--pst-color-text-muted);
    border-top-color: var(--pst-color-border);
}

/* Footer last updated styling */
.bd-footer .last-updated {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    font-size: 0.8em;
}

/* Sphinx last updated styling */
.bd-footer-content .last-updated,
.bd-footer-content div:contains("Last updated"),
.bd-footer-content div[class*="last-updated"] {
    color: var(--pst-color-text-muted);
    font-size: 0.85em;
    margin-top: 0.5rem;
}

/* ========== LaTeX Math Formula Styling Optimizations ========== */
/* Force all LaTeX formulas to center - high priority styles */
.MathJax_Display,
.MathJax_Display *,
mjx-container[display="block"],
mjx-container[display="block"] *,
.math,
.displaymath,
div.math,
div.displaymath,
span.math,
.math-container,
.latex-formula {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure all MathJax internal elements are centered as well */
.MathJax_Display > *,
.MathJax_Display .MathJax,
.MathJax_Display .MathJax_SVG,
.MathJax_Display .MathJax_Element,
.MathJax_Display mjx-container,
mjx-container[display="block"] > *,
mjx-container[display="block"] mjx-math,
mjx-container[display="block"] mjx-assistive-mml {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: static !important;
    float: none !important;
}

/* Force override any potential right-aligned styles */
.MathJax_Display,
mjx-container[display="block"] {
    text-align: center !important;
    margin: 1.5rem auto !important;
    padding: 0.5rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Centering styles for formula containers */
.MathJax_Display:before,
.MathJax_Display:after,
mjx-container[display="block"]:before,
mjx-container[display="block"]:after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Hover effect enhancements */
.MathJax_Display:hover,
mjx-container[display="block"]:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
    border-radius: 8px !important;
    background: rgba(59, 130, 246, 0.02) !important;
    transition: all 0.3s ease !important;
}

/* MathJax inline formula styles */
.MathJax,
mjx-container:not([display="block"]) {
    font-size: 1.1em !important;
    color: var(--secondary-color) !important;
    transition: all 0.3s ease !important;
    display: inline !important;
    vertical-align: middle !important;
}

.MathJax:hover,
mjx-container:not([display="block"]):hover {
    color: var(--primary-color) !important;
    transform: scale(1.05) !important;
}

/* MathJax SVG styles */
.MathJax_SVG {
    color: var(--secondary-color) !important;
    transition: all 0.3s ease !important;
}

.MathJax_SVG:hover {
    color: var(--primary-color) !important;
    filter: drop-shadow(0 2px 8px var(--shadow-blue)) !important;
}

/* Math formula block styles */
.math {
    font-size: 1.1em !important;
    color: var(--secondary-color) !important;
    margin: 0.5rem 0 !important;
    padding: 0.2rem 0.4rem !important;
    background: rgba(37, 99, 235, 0.05) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.math:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    transform: scale(1.02) !important;
}

/* Display formula container */
.math.display {
    display: block !important;
    text-align: center !important;
    margin: 1.5rem 0 !important;
    padding: 1rem !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-radius: 12px !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 4px 15px var(--shadow-blue-light) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.math.display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-blue-deep);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

.math.display:hover::before {
    transform: scaleY(1);
}

.math.display:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-blue);
}

/* Specific math symbol and formula optimizations */
.math .mfrac {
    margin: 0.2rem 0 !important;
}

.math .msub,
.math .msup {
    font-size: 0.8em !important;
}

.math .mroot {
    margin: 0.1rem 0 !important;
}

/* Math formula numbering styles */
.eqno {
    float: right !important;
    margin-right: 1rem !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    background: rgba(37, 99, 235, 0.1) !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
}

.eqno:hover {
    background: rgba(37, 99, 235, 0.2) !important;
    transform: scale(1.05) !important;
}

/* Math formula styles under dark mode */
[data-theme="dark"] .MathJax_Display {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .MathJax,
[data-theme="dark"] .MathJax_SVG {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .MathJax:hover,
[data-theme="dark"] .MathJax_SVG:hover {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .math {
    color: #e2e8f0 !important;
    background: rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .math:hover {
    background: rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .math.display {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .eqno {
    color: var(--primary-color) !important;
    background: rgba(96, 165, 250, 0.15) !important;
}

[data-theme="dark"] .eqno:hover {
    background: rgba(96, 165, 250, 0.25) !important;
}

/* Accessibility improvements for math formulas */
.MathJax_Display[aria-hidden="false"],
.MathJax[aria-hidden="false"] {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    transition: outline-color 0.3s ease !important;
}

.MathJax_Display[aria-hidden="false"]:focus,
.MathJax[aria-hidden="false"]:focus {
    outline-color: var(--primary-color) !important;
}

/* Special character optimizations inside math formulas */
.math .mo {
    padding: 0 0.1em !important;
}

.math .mn {
    color: #d97706 !important;
    font-weight: 600 !important;
}

.math .mi {
    color: var(--secondary-color) !important;
    font-style: italic !important;
}

[data-theme="dark"] .math .mn {
    color: #fbbf24 !important;
}

[data-theme="dark"] .math .mi {
    color: #93c5fd !important;
}

/* Improve MathJax rendering quality */
.MathJax_Display svg,
.MathJax svg {
    shape-rendering: geometricPrecision !important;
    text-rendering: optimizeLegibility !important;
    image-rendering: optimizeQuality !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Math formula loading animation */
.MathJax_Display.MathJax_Processing,
.MathJax.MathJax_Processing {
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
}

.MathJax_Display.MathJax_Processing::after,
.MathJax.MathJax_Processing::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    border-top-color: transparent;
    animation: mathLoading 1s linear infinite;
}

@keyframes mathLoading {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive math formulas */
@media (max-width: 768px) {
    .MathJax_Display {
        margin: 1rem 0 !important;
        padding: 0.8rem !important;
        font-size: 0.9em !important;
    }

    .MathJax {
        font-size: 1em !important;
    }

    .math.display {
        margin: 1rem 0 !important;
        padding: 0.8rem !important;
        font-size: 0.9em !important;
    }
}

/* Selection styles for math formulas */
.MathJax_Display::selection,
.MathJax::selection {
    background: rgba(37, 99, 235, 0.2) !important;
    color: inherit !important;
}

.MathJax_Display::-moz-selection,
.MathJax::-moz-selection {
    background: rgba(37, 99, 235, 0.2) !important;
    color: inherit !important;
}

[data-theme="dark"] .MathJax_Display::selection,
[data-theme="dark"] .MathJax::selection,
[data-theme="dark"] .MathJax_Display::-moz-selection,
[data-theme="dark"] .MathJax::-moz-selection {
    background: rgba(96, 165, 250, 0.3) !important;
    color: inherit !important;
}

/* ========== Enhanced Button Styles ========== */

/* ========== Functions and Classes Page Styling ========== */
/* Functions and Classes page enhancements */
.functions-classes-page .contents {
    background: var(--gradient-blue-light) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 4px 15px var(--shadow-blue-light) !important;
}

.functions-classes-page .contents .topic-title {
    color: var(--secondary-color) !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.functions-classes-page .contents ul {
    columns: 2 !important;
    column-gap: 2rem !important;
    list-style: none !important;
    padding-left: 0 !important;
}

.functions-classes-page .contents li {
    break-inside: avoid !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.functions-classes-page .contents li:hover {
    background: rgba(37, 99, 235, 0.1) !important;
    transform: translateX(4px) !important;
}

.functions-classes-page .contents a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* Module section styling */
.functions-classes-page h2 {
    background: var(--gradient-blue-deep) !important;
    color: white !important;
    padding: 1rem 1.5rem !important;
    border-radius: 12px !important;
    margin: 2rem 0 1rem 0 !important;
    box-shadow: 0 4px 15px var(--shadow-blue) !important;
    transition: all 0.3s ease !important;
}

.functions-classes-page h2:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px var(--shadow-blue-hover) !important;
}

.functions-classes-page h3 {
    color: var(--secondary-color) !important;
    border-bottom: 2px solid var(--light-blue) !important;
    padding-bottom: 0.5rem !important;
    margin: 1.5rem 0 1rem 0 !important;
    font-weight: 600 !important;
}

/* Autosummary tables styling for functions page */
.functions-classes-page .autosummary {
    background: white !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px var(--shadow-blue-light) !important;
    margin: 1rem 0 !important;
    border: none !important;
}

.functions-classes-page .autosummary thead th {
    background: var(--gradient-blue-light) !important;
    color: var(--dark-blue) !important;
    font-weight: 600 !important;
    padding: 1rem !important;
    border: none !important;
}

.functions-classes-page .autosummary tbody td {
    padding: 0.8rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-left: none !important;
    border-right: none !important;
    transition: all 0.2s ease !important;
}

.functions-classes-page .autosummary tbody tr:hover {
    background: rgba(37, 99, 235, 0.05) !important;
    transform: translateX(2px) !important;
}

.functions-classes-page .autosummary tbody tr:hover td {
    border-left: 3px solid var(--primary-color) !important;
}

.functions-classes-page .autosummary a {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.functions-classes-page .autosummary a:hover {
    color: var(--secondary-color) !important;
    text-shadow: 0 0 8px var(--shadow-blue) !important;
}

/* Quick lookup section styling */
.functions-classes-page .section:last-of-type {
    background: var(--gradient-blue-light) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    margin-top: 3rem !important;
    border: 2px solid white !important;
    box-shadow: 0 8px 30px var(--shadow-blue-light) !important;
}

.functions-classes-page .section:last-of-type h2 {
    background: white !important;
    color: var(--primary-color) !important;
    text-align: center !important;
    margin: -1rem -1rem 2rem -1rem !important;
    border-radius: 12px 12px 0 0 !important;
}

.functions-classes-page .section:last-of-type ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
}

.functions-classes-page .section:last-of-type li {
    background: white !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.functions-classes-page .section:last-of-type li:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 20px var(--shadow-blue) !important;
}

/* Notes and tips styling */
.functions-classes-page .admonition {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    margin: 2rem 0 !important;
    overflow: hidden !important;
}

.functions-classes-page .admonition.note {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-left: 4px solid #2563eb !important;
}

.functions-classes-page .admonition.tip {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    border-left: 4px solid #16a34a !important;
}

.functions-classes-page .admonition-title {
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--secondary-color) !important;
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.functions-classes-page .admonition p {
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
    color: var(--dark-blue) !important;
}

/* Responsive design for functions page */
@media (max-width: 768px) {
    .functions-classes-page .contents ul {
        columns: 1 !important;
    }

    .functions-classes-page .section:last-of-type ul {
        grid-template-columns: 1fr !important;
    }

    .functions-classes-page h2 {
        padding: 0.8rem 1rem !important;
        font-size: 1.3rem !important;
    }
}

/* Dark mode support for functions page */
[data-theme="dark"] .functions-classes-page .contents {
    background: var(--gradient-blue-light) !important;
    border-left: 4px solid var(--primary-color) !important;
}

[data-theme="dark"] .functions-classes-page .autosummary {
    background: #374151 !important;
}

[data-theme="dark"] .functions-classes-page .autosummary thead th {
    background: var(--gradient-blue-light) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .functions-classes-page .autosummary tbody td {
    border-bottom: 1px solid #4b5563 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .functions-classes-page .autosummary tbody tr:hover {
    background: rgba(96, 165, 250, 0.15) !important;
}

[data-theme="dark"] .functions-classes-page .section:last-of-type {
    background: var(--gradient-blue-light) !important;
    border: 2px solid #4b5563 !important;
}

[data-theme="dark"] .functions-classes-page .section:last-of-type li {
    background: #374151 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .functions-classes-page .admonition.note {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
}

[data-theme="dark"] .functions-classes-page .admonition.tip {
    background: linear-gradient(135deg, #134e4a 0%, #1f2937 100%) !important;
}

[data-theme="dark"] .functions-classes-page .admonition-title,
[data-theme="dark"] .functions-classes-page .admonition p {
    color: #e2e8f0 !important;
}
/* Top-left title click-to-home functionality */
.bd-header .navbar-brand,
.bd-header .navbar-brand:hover,
.bd-header .navbar-brand:focus,
.bd-header .navbar-brand:active {
    color: white !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Click effect */
.bd-header .navbar-brand:hover {
    transform: scale(1.05) !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8) !important;
}

/* Add JS to make the title click go to the homepage */
.bd-header .navbar-brand {
    position: relative;
}

.bd-header .navbar-brand::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.bd-header .navbar-brand:hover::after {
    width: 100%;
}

/* Ensure title is clickable */
.bd-header .navbar-brand {
    pointer-events: auto !important;
}

/* Enhance title text styling */
.bd-header .navbar-brand .navbar-text {
    color: white !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Logo image styles - enhance hover and click effects */
.bd-header .navbar-brand img,
.bd-sidebar-primary .navbar-brand img,
.navbar-brand img {
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border-radius: 8px !important;
}

.bd-header .navbar-brand img:hover,
.bd-sidebar-primary .navbar-brand img:hover,
.navbar-brand img:hover {
    transform: scale(1.02) translateY(-2px) !important;
    filter: drop-shadow(0 1px 3px rgba(59, 130, 246, 0.3)) !important;
    animation: logoGlow 0.6s ease-in-out !important;
}

.bd-header .navbar-brand img:active,
.bd-sidebar-primary .navbar-brand img:active,
.navbar-brand img:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
}

/* Ensure logo link is clickable */
.bd-header .navbar-brand,
.bd-sidebar-primary .navbar-brand,
.navbar-brand {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.bd-header .navbar-brand:hover,
.bd-sidebar-primary .navbar-brand:hover,
.navbar-brand:hover {
    transform: scale(1.05) !important;
}

/* Logo glow animation - gradient halo */
@keyframes logoGlow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(59, 130, 246, 0),
                    0 0 0 rgba(147, 197, 253, 0);
    }
    50% {
        box-shadow: 0 0 2px rgba(59, 130, 246, 0.6),
                    0 0 4px rgba(147, 197, 253, 0.3);
    }
}

/* Logo click ripple animation */
@keyframes ripple {
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Force logo clickable styles */
.logo-clickable,
.logo-clickable img {
    cursor: pointer !important;
}

/* Responsive title styles */
@media (max-width: 768px) {
    .bd-header .navbar-brand {
        font-size: 1.1rem !important;
    }
}

/* ========== Copy Button Fix ========== */
/* Fix copy button positioning issues */
button.copybtn {
    position: absolute !important;
    top: .3em !important;
    right: .3em !important;
    z-index: 10 !important;  /* Ensure button stays on top */
    opacity: 0 !important;
    transition: opacity 0.3s, border .3s, background-color .3s !important;
}

/* Ensure highlight container has relative positioning */
div.highlight {
    position: relative !important;
}

/* Show the copybutton on hover */
.highlight:hover button.copybtn,
button.copybtn.success {
    opacity: 1 !important;
}

/* Style the copy button */
button.copybtn {
    width: 1.7em !important;
    height: 1.7em !important;
    padding: 0 !important;
    border: #1b1f2426 1px solid !important;
    border-radius: 0.4em !important;
    background-color: #f6f8fa !important;
    color: #57606a !important;
    user-select: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

button.copybtn:hover {
    background-color: rgb(235, 235, 235) !important;
}

button.copybtn:active {
    background-color: rgb(187, 187, 187) !important;
}

button.copybtn.success {
    border-color: #22863a !important;
    color: #22863a !important;
}

button.copybtn svg {
    stroke: currentColor !important;
    width: 1.5em !important;
    height: 1.5em !important;
    padding: 0.1em !important;
}

/* Hide copy button when printing */
@media print {
    button.copybtn {
        display: none !important;
    }
}

/* ========== Table display fixes and responsive enhancements ========== */
/* Fix table clipping issues */
.bd-main .bd-content .bd-article-container {
    overflow: visible !important; /* Allow content overflow to be visible */
}

/* Ensure table containers can scroll horizontally */
.bd-article {
    overflow-x: auto !important;
}

/* Responsive table wrapper */
.responsive-table-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15);
    margin: 1rem 0;
    background: white;
    transition: all 0.3s ease;
}

.responsive-table-wrapper:hover {
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.2);
    transform: translateY(-2px);
}

/* Table control bar styles */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #1e40af;
    transition: all 0.3s ease;
}

/* Table scroll container */
.table-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #f1f5f9;
}

.table-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* Base styles for responsive tables */
.responsive-table-processed {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: white !important;
    transition: all 0.3s ease !important;
}

/* Enhanced table cell styles */
.responsive-table-processed th,
.responsive-table-processed td {
    padding: 12px 16px !important;
    border: 1px solid #e2e8f0 !important;
    text-align: left !important;
    vertical-align: top !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
}

/* Enhanced table header styles */
.responsive-table-processed th {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    font-weight: 600 !important;
    color: #1e40af !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* Compact mode styles */
.responsive-table-processed.compact-mode th,
.responsive-table-processed.compact-mode td {
    padding: 6px 8px !important;
    font-size: 0.9rem !important;
}

/* Row hover effect */
.responsive-table-processed tbody tr {
    transition: all 0.2s ease !important;
}

.responsive-table-processed tbody tr:hover {
    background: rgba(37, 99, 235, 0.05) !important;
    transform: translateX(2px) !important;
    box-shadow: 2px 0 8px rgba(37, 99, 235, 0.1) !important;
}

/* Zebra striping */
.responsive-table-processed tbody tr:nth-child(even) {
    background-color: #f8fafc !important;
}

.responsive-table-processed tbody tr:nth-child(even):hover {
    background: rgba(37, 99, 235, 0.05) !important;
}

/* Special styles for long function names */
.responsive-table-processed td:has(a[href*="skyborn."]),
.responsive-table-processed th:has(a[href*="skyborn."]) {
    font-family: 'Monaco', 'Lucida Console', monospace !important;
    font-size: 0.9rem !important;
    color: #1e40af !important;
    font-weight: 500 !important;
}

/* Enhanced styles for function links */
.responsive-table-processed a[href*="skyborn."] {
    text-decoration: none !important;
    border-bottom: 1px dotted #3b82f6 !important;
    transition: all 0.2s ease !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

.responsive-table-processed a[href*="skyborn."]:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-bottom: 1px solid #3b82f6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
}

/* Toast notification styles */
.table-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    z-index: 10000;
    font-size: 0.9rem;
    font-weight: 500;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Column highlight effect */
.responsive-table-processed .column-highlight {
    background: rgba(37, 99, 235, 0.08) !important;
    border-left: 2px solid #3b82f6 !important;
    border-right: 2px solid #3b82f6 !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .table-controls {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .table-controls > div {
        width: 100%;
        text-align: center;
    }

    .responsive-table-processed th,
    .responsive-table-processed td {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
    }

    .responsive-table-processed.compact-mode th,
    .responsive-table-processed.compact-mode td {
        padding: 4px 6px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .responsive-table-wrapper {
        margin: 0.5rem 0;
        border-radius: 8px;
    }

    .table-controls {
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .responsive-table-processed th,
    .responsive-table-processed td {
        padding: 6px 8px !important;
        font-size: 0.85rem !important;
    }
}

/* Dark mode support */
[data-theme="dark"] .responsive-table-wrapper {
    background: #374151 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .table-controls {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid #4b5563 !important;
}

[data-theme="dark"] .responsive-table-processed {
    background: #374151 !important;
}

[data-theme="dark"] .responsive-table-processed th {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .responsive-table-processed th,
[data-theme="dark"] .responsive-table-processed td {
    border: 1px solid #4b5563 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .responsive-table-processed tbody tr:nth-child(even) {
    background-color: #1f2937 !important;
}

[data-theme="dark"] .responsive-table-processed tbody tr:hover {
    background: rgba(96, 165, 250, 0.15) !important;
}

[data-theme="dark"] .responsive-table-processed a[href*="skyborn."] {
    color: #60a5fa !important;
    border-bottom: 1px dotted #60a5fa !important;
}

[data-theme="dark"] .responsive-table-processed a[href*="skyborn."]:hover {
    background-color: rgba(96, 165, 250, 0.15) !important;
    border-bottom: 1px solid #60a5fa !important;
}

/* ========== Tutorial Card Cover Reset ========== */
/* Keep tutorial covers isolated from the site-wide image chrome rules below. */
.skyborn-tutorial-card__media {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 210px;
}

.skyborn-tutorial-card .skyborn-tutorial-card__cover,
.bd-content .skyborn-tutorial-card .skyborn-tutorial-card__cover,
.bd-article .skyborn-tutorial-card .skyborn-tutorial-card__cover,
article .skyborn-tutorial-card .skyborn-tutorial-card__cover,
.document .skyborn-tutorial-card .skyborn-tutorial-card__cover,
[data-theme="dark"] .skyborn-tutorial-card .skyborn-tutorial-card__cover,
[data-theme="dark"] .bd-content .skyborn-tutorial-card .skyborn-tutorial-card__cover,
[data-theme="dark"] .bd-article .skyborn-tutorial-card .skyborn-tutorial-card__cover,
[data-theme="dark"] article .skyborn-tutorial-card .skyborn-tutorial-card__cover,
[data-theme="dark"] .document .skyborn-tutorial-card .skyborn-tutorial-card__cover {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

.skyborn-tutorial-card .skyborn-tutorial-card__cover::before,
.skyborn-tutorial-card .skyborn-tutorial-card__cover::after,
.bd-content .skyborn-tutorial-card .skyborn-tutorial-card__cover::before,
.bd-content .skyborn-tutorial-card .skyborn-tutorial-card__cover::after,
.bd-article .skyborn-tutorial-card .skyborn-tutorial-card__cover::before,
.bd-article .skyborn-tutorial-card .skyborn-tutorial-card__cover::after,
article .skyborn-tutorial-card .skyborn-tutorial-card__cover::before,
article .skyborn-tutorial-card .skyborn-tutorial-card__cover::after,
.document .skyborn-tutorial-card .skyborn-tutorial-card__cover::before,
.document .skyborn-tutorial-card .skyborn-tutorial-card__cover::after {
    display: none !important;
    content: none !important;
}

.skyborn-tutorial-card .skyborn-tutorial-card__cover:hover,
.bd-content .skyborn-tutorial-card .skyborn-tutorial-card__cover:hover,
.bd-article .skyborn-tutorial-card .skyborn-tutorial-card__cover:hover,
article .skyborn-tutorial-card .skyborn-tutorial-card__cover:hover,
.document .skyborn-tutorial-card .skyborn-tutorial-card__cover:hover {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .skyborn-tutorial-card__media {
        min-height: 180px;
    }
}

/* Animation keyframes */
@keyframes tableScale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes columnPulse {
    0%, 100% {
        background: rgba(37, 99, 235, 0.05);
    }
    50% {
        background: rgba(37, 99, 235, 0.1);
    }
}

/* Table loading animation */
.responsive-table-processed.loading {
    animation: tableScale 0.3s ease-out;
}

/* Column auto-adjust animation */
.responsive-table-processed .auto-fitting {
    animation: columnPulse 0.5s ease-in-out;
}

/* Original table styles (fallback) */
table:not(.responsive-table-processed) {
    width: 100% !important;
    max-width: none !important;
    border-collapse: collapse !important;
    margin: 1rem 0 !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Original table cell styles */
table:not(.responsive-table-processed) th,
table:not(.responsive-table-processed) td {
    padding: 12px 16px !important;
    border: 1px solid #e2e8f0 !important;
    text-align: left !important;
    vertical-align: top !important;
    word-wrap: break-word !important;
}

/* Original table header styles */
table:not(.responsive-table-processed) th {
    background: var(--gradient-blue-light) !important;
    font-weight: 600 !important;
    color: var(--dark-blue) !important;
}

/* Original table row hover effect */
table:not(.responsive-table-processed) tbody tr:hover {
    background: rgba(37, 99, 235, 0.05) !important;
    transition: background-color 0.2s ease !important;
}