/*
 * App-specific layout only. Prefer Bootstrap utilities on markup for flex/display.
 * State: html.sidebar-collapsed (cookie FOUC) drives thin sidebar.
 */

/* Shell: full viewport, no document scroll (flex utilities on markup) */
.app-shell {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* Sidebar expanded width + collapse animation */
.app-sidebar {
  width: 280px;
  overflow-x: hidden;
  transition: width 0.2s ease;
}

/* Expand control: thin mode only */
.sidebar-toggle-bottom-wrap {
  display: none;
  text-align: center;
}

/* Content column: flex min-size fix (BS has no min-w-0 utility for this case) */
.app-content-column {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-content-body {
  min-height: 0;
}

/* Optional content-header region: hide when no ui:define content */
.app-content-header:empty {
  display: none;
}

/* Bootstrap Icons font: align with surrounding text */
.bi {
  vertical-align: -0.125em;
}

/*
 * Active nav accent — expanded sidebar only.
 * Left vertical bar on .nav-link.active (from app:sidebarNav active="true").
 */
html:not(.sidebar-collapsed) .app-sidebar .nav-link {
  position: relative;
}

html:not(.sidebar-collapsed) .app-sidebar .nav-link.active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  content: "";
  background-color: var(--app-sidebar-active-bar, #005cb7);
}

/* Soften default nav-pills fill so the bar is the primary selected cue */
html:not(.sidebar-collapsed) .app-sidebar .nav-pills .nav-link.active {
  background-color: transparent;
  color: inherit !important;
  font-weight: bold;
}

/* ---- Thin / icon-only sidebar (html.sidebar-collapsed) ---- */

html.sidebar-collapsed .app-sidebar {
  width: 4.5rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.sidebar-collapsed .sidebar-label {
  display: none !important;
}

html.sidebar-collapsed .sidebar-toggle-top {
  display: none !important;
}

html.sidebar-collapsed .sidebar-toggle-bottom-wrap {
  display: block !important;
}

html.sidebar-collapsed .sidebar-header {
  justify-content: center;
  width: 100%;
}

/* Brand icon only: center in the thin rail */
html.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0;
}

html.sidebar-collapsed .app-sidebar .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

/* Thin mode: no active/selected chrome (reset Bootstrap nav-pills active) */
html.sidebar-collapsed .app-sidebar .nav-pills .nav-link.active {
  background-color: transparent !important;
  color: inherit !important;
  font-weight: inherit;
}

html.sidebar-collapsed .app-sidebar .nav-link .bi,
html.sidebar-collapsed .app-sidebar .me-2 {
  margin-right: 0 !important;
}

/* Thin mode: larger icons (≈ Bootstrap .fs-2) */
/*html.sidebar-collapsed .app-sidebar .bi {  font-size: calc(1.325rem + 0.9vw);}*/
/*@media (min-width: 1200px) {  html.sidebar-collapsed .app-sidebar .bi {    font-size: 1.5rem;  }}*/

html.sidebar-collapsed .sidebar-user-toggle {
  justify-content: center;
}

html.sidebar-collapsed .sidebar-user-toggle.dropdown-toggle::after {
  display: none;
}