/* Make the page header a flex row so the toggle sits inline with the title */
.page-col-content.is-page-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

/* The toggle button */
.mad-sb-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: var(--v-primary-base, #1976d2);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.mad-sb-btn:hover { opacity: 1; }

/* Dim the button when the sidebar isn't available at this viewport width */
.mad-sb-btn.mad-sb-unavailable {
    opacity: 0.35;
    cursor: default;
}

.mad-sb-btn i {
    font-size: 18px;
    color: #fff;
    line-height: 1;
}

/* Collapsed state: hide sidebar, expand content */
.mad-sc-hidden .page-col-sd {
    display: none !important;
}

.mad-sc-hidden .page-col-content {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* Also expand the page header, which lives in a separate Vuetify grid row.
   With tocPosition=left the header gets offset-lg-3/offset-xl-2 classes that
   add margin-left to skip past the sidebar — clear both when collapsed. */
.mad-sc-hidden .page-col-content.is-page-header {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}