/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Collapsible sidebar ─────────────────────────────────────────────────── */
aside {
  width: 15rem;
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed aside {
  width: 4rem;
}
main {
  transition: margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed main {
  margin-left: 4rem;
}
body.no-sidebar-transition aside,
body.no-sidebar-transition main {
  transition: none;
}

/* Hide text labels when collapsed */
body.sidebar-collapsed .sidebar-text {
  display: none;
}

/* Hide logo text when collapsed */
body.sidebar-collapsed .sidebar-logo-full {
  display: none;
}

/* Toggle chevron rotation */
.sidebar-toggle-icon {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Center nav links when collapsed */
body.sidebar-collapsed .sidebar-nav-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
body.sidebar-collapsed .sidebar-nav-btn {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Remove icon margin when collapsed */
body.sidebar-collapsed .sidebar-nav-icon {
  margin-right: 0;
}

/* Collapsed header: center the toggle button */
body.sidebar-collapsed .sidebar-header {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
body.sidebar-collapsed .sidebar-header .sidebar-toggle-btn {
  margin-left: 0;
}