/* Make room for the toggle button */
.ssbasic-sidebar {
  position: relative;
}

:root {
  --ssbasic-sidebar-collapsed-width: 3.25rem; /* adjust to taste */
}

/* Toggle button: sits on the right edge of sidebar */
.ssbasic-sidebar__toggle {
  position: absolute;
  top: 0.75rem;
  right: -0.75rem;
  z-index: 10;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ssbasic-sidebar__toggle:hover {
  background: var(--bs-gray-100, #f8f9fa);
}

/* Show only the correct icon depending on state */
.ssbasic-sidebar__toggle .fa-angle-right { display: none; }
.ssbasic-sidebar-col--collapsed .ssbasic-sidebar__toggle .fa-angle-left { display: none; }
.ssbasic-sidebar-col--collapsed .ssbasic-sidebar__toggle .fa-angle-right { display: inline-block; }

/* Collapsed behavior applies on lg+ only */
@media (min-width: 992px) {
  /* Collapse the column to a skinny rail */
  .ssbasic-sidebar-col--collapsed {
    flex: 0 0 auto;
    width: var(--ssbasic-sidebar-collapsed-width);
  }

  /* Let the main column expand to fill the freed space. */
  .ssbasic-sidebar-col--collapsed + [class*="col-"] {
    flex: 1 1 auto;
    width: calc(100% - var(--ssbasic-sidebar-collapsed-width));
    max-width: calc(100% - var(--ssbasic-sidebar-collapsed-width));
    min-width: 0;
  }

  /* Hide sidebar text/content in collapsed state */
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner .link-text,
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner .accordion-body,
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner ul {
    display: none;
  }

  /* Also hide block-menu wrappers (e.g. the H5 headings like "Platform Administration"). */
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner .block-menu > * {
    display: none;
  }

  /* Keep icons visible if your links include icons */
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner svg,
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner i {
    display: inline-block;
  }

  /* Optional: center icons when collapsed */
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner a,
  .ssbasic-sidebar-col--collapsed .ssbasic-sidebar__inner button {
    justify-content: center;
  }
}