/* Base Admonition Style */
.admonition {
    border-left: 6px solid #6272a4 !important; /* Dracula purple */
    background-color: #282a36 !important; /* Dracula background */
    padding: 10px !important;
    margin: 20px 0 !important;
    border-radius: 4px !important;
    position: relative !important;
    width: 100% !important;
}

/* Ensure the admonition title aligns left */
.admonition-title {
    display: flex !important;
    align-items: center !important; /* Align text and icon vertically */
    justify-content: flex-start !important; /* Force left alignment */
    text-align: left !important; /* Override any conflicting rules */
    padding: 10px !important;
    width: 100% !important; /* Ensure full width */
    background-color: #44475a !important; /* Dracula darker purple */
    border-radius: 4px 4px 0 0 !important;
    font-weight: bold !important;
    color: #f8f8f2 !important;
}

/* Ensure the title text does not get pushed to the right */
.admonition-title * {
    float: none !important;
    flex-grow: 0 !important;
    text-align: left !important;
}

/* Ensure the icon is positioned correctly */
.admonition-title i {
    order: 2 !important; /* Pushes icon to the end */
    font-size: 1.2em !important;
    margin-left: 8px !important;
    line-height: 1 !important;
}

/* Custom Colors for Different Admonition Types */
.admonition.note {
    border-left-color: #8be9fd !important; /* Cyan */
}

.admonition.warning {
    border-left-color: #ffb86c !important; /* Orange */
}

.admonition.danger {
    border-left-color: #ff5555 !important; /* Red */
}

.admonition.success {
    border-left-color: #50fa7b !important; /* Green */
}

/* Expandable Details */
.details {
    background-color: #282a36 !important;
    border-left: 6px solid #bd93f9 !important;
    padding: 10px !important;
    margin: 20px 0 !important;
    border-radius: 4px !important;
}

/* Hide content of collapsed admonitions */
details:not([open]) > .admonition-content {
    display: none !important;
}