/* Center all Mermaid diagrams */
.mermaid {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Center the pre element that contains mermaid diagrams */
pre.mermaid {
    display: flex;
    justify-content: center;
}

/* Adjust Mermaid line colors based on theme */
/* Light mode - darker lines for visibility on white background */
html[data-theme="light"] .mermaid .edgePath .path,
html[data-theme="light"] .mermaid .flowchart-link {
    stroke: #555 !important;
    stroke-width: 2px !important;
}

/* Light mode - darker arrow tips */
html[data-theme="light"] .mermaid .arrowheadPath,
html[data-theme="light"] .mermaid marker path {
    fill: #555 !important;
    stroke: #555 !important;
}

html[data-theme="dark"] .mermaid .arrowheadPath,
html[data-theme="dark"] .mermaid marker path {
    fill: #aaa !important;
    stroke: #aaa !important;
}

/* Dark mode - lighter lines for visibility on dark background */
html[data-theme="dark"] .mermaid .edgePath .path,
html[data-theme="dark"] .mermaid .flowchart-link {
    stroke: #aaa !important;
    stroke-width: 2px !important;
}

/* Dark mode - lighter arrow tips */
html[data-theme="dark"] .mermaid .arrowheadPath,
html[data-theme="dark"] .mermaid marker path {
    fill: #aaa !important;
    stroke: #aaa !important;
}

/* Adjust edge labels background based on theme */
html[data-theme="light"] .mermaid .edgeLabel {
    background-color: #fff !important;
}

html[data-theme="dark"] .mermaid .edgeLabel {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

/* Custom CSS for collapsible parameter lists */

/* Hide parameters in signatures */
.sig-param-hidden {
    display: none !important;
}

/* Inline toggle button for signatures */
.params-toggle-btn-inline {
    display: inline;
    padding: 0.2rem 0.5rem;
    margin: 0 0.25rem;
    background-color: var(--pst-color-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85em;
    font-family: var(--pst-font-family-base);
    color: var(--pst-color-primary);
    transition: all 0.2s ease;
    vertical-align: middle;
}

.params-toggle-btn-inline:hover {
    background-color: var(--pst-color-background);
    border-color: var(--pst-color-border);
}

.params-toggle-btn-inline:focus {
    outline: none;
}

.toggle-icon {
    display: inline-block;
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

/* Wrapper for the button */
.sig-params-wrapper {
    display: inline;
}

/* Old styles for field-list collapsing (kept for backward compatibility) */
.collapsible-params {
    margin: 1rem 0;
}

.params-toggle-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    background-color: var(--pst-color-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--pst-color-primary);
    transition: all 0.3s ease;
}

.params-toggle-btn:hover {
    background-color: var(--pst-color-background);
    border-color: var(--pst-color-border);
}

.params-content {
    max-height: 10000px;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.3s ease;
    opacity: 1;
}

.params-content.collapsed {
    max-height: 0;
    opacity: 0;
}

/* Ensure the collapsed parameters look good */
.params-content dl.field-list {
    margin-top: 0;
}

.params-content > dt {
    margin-top: 0.5rem;
}

.params-content > dt:first-child {
    margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .params-toggle-btn {
        width: 100%;
        text-align: left;
    }
}