/* App sidebar (public/navModules.js).
   Own file, not styles.css: styles.css is minified in place on the server at boot. Loaded after theme.css, so the
   header-nav-btn look from there is the starting point and only what a vertical list needs is changed here.

   Layout: the header stays on top, the sidebar sits under it on the left, the content takes the rest. Under 900 px
   the sidebar becomes a drawer behind the ☰ button, because a 232 px column would leave a phone almost nothing. */

:root { --sb-w: 232px; --sb-w-min: 64px; }
body.sb-collapsed { --sb-w: var(--sb-w-min); }

.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--header-h, 56px)); }
.app-shell > .dashboard-main { flex: 1 1 auto; min-width: 0; }

.app-sidebar {
  position: sticky;
  top: var(--header-h, 56px);
  flex: 0 0 var(--sb-w);
  width: var(--sb-w);
  height: calc(100vh - var(--header-h, 56px));
  display: flex;
  flex-direction: column;
  background: var(--ui-surface, #fff);
  border-right: 1px solid var(--ui-border, #E2E5EA);
  z-index: 150;
  transition: width .18s ease, flex-basis .18s ease;
}
.sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; display: flex; flex-direction: column; gap: 14px; }
.sb-group { display: flex; flex-direction: column; gap: 2px; }
.sb-group.sb-empty { display: none; }
.sb-label {
  padding: 0 10px 4px;
  font-size: var(--ui-fs-xs, 12px);
  font-weight: 600;
  color: var(--ui-text-4, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the moved buttons: full-width rows with a coloured bar on the open area */
.app-sidebar .header-nav-btn {
  width: 100%;
  height: 38px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px;
  font-size: var(--ui-fs-sm, 13px);
  overflow: hidden;
}
.app-sidebar .header-nav-btn > span { overflow: hidden; text-overflow: ellipsis; }
.app-sidebar .header-nav-btn svg { width: 17px; height: 17px; }
.app-sidebar .header-nav-btn.hidden,
.app-sidebar .header-nav-btn.sb-hidden-entry { display: none !important; }
.app-sidebar .header-nav-btn[aria-pressed="true"],
.app-sidebar .header-nav-btn.sb-active {
  color: var(--ui-accent, #2B4C9B);
  background: var(--ui-accent-soft, #EDF1FA);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ui-accent, #2B4C9B);
}
.app-sidebar .header-nav-btn:active { transform: none; }

.sb-collapse {
  display: flex; align-items: center; justify-content: center;
  height: 36px; margin: 8px 10px 12px;
  border: 1px solid var(--ui-border, #E2E5EA); border-radius: var(--ui-r, 8px);
  background: var(--ui-surface, #fff); color: var(--ui-text-3, #5A6270); cursor: pointer;
}
.sb-collapse:hover { background: var(--ui-hover, #F1F3F7); color: var(--ui-text, #151A23); }
.sb-collapse svg { transition: transform .18s ease; }

/* collapsed: icons only; the button's own title is the tooltip */
body.sb-collapsed .sb-label { visibility: hidden; height: 6px; padding: 0; }
body.sb-collapsed .app-sidebar .header-nav-btn { justify-content: center; padding: 0; }
body.sb-collapsed .app-sidebar .header-nav-btn > span { display: none; }
body.sb-collapsed .sb-collapse svg { transform: rotate(180deg); }

/* ☰ — only where the sidebar is a drawer */
.sb-toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -6px;
  border: 0; border-radius: var(--ui-r, 8px); background: transparent; color: var(--ui-text-2, #3D4553); cursor: pointer;
}
.sb-toggle:hover { background: var(--ui-hover, #F1F3F7); }
.sb-scrim[hidden] { display: none; }

/* full-screen views that used to start at the left edge now start beside the sidebar */
@media (min-width: 900px) {
  .app-shell .pm-view { left: var(--sb-w); }
}

@media (max-width: 899px) {
  .sb-toggle { display: inline-flex; }
  .app-sidebar {
    position: fixed;
    top: var(--header-h, 56px);
    left: 0;
    bottom: 0;
    height: auto;
    width: 264px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--ui-shadow-drawer, 0 0 48px -16px rgba(16,24,40,.22));
    z-index: 1300;
  }
  body.sb-open .app-sidebar { transform: none; }
  .sb-scrim { position: fixed; inset: var(--header-h, 56px) 0 0 0; background: rgba(16, 24, 40, .32); z-index: 1250; }
  .sb-collapse { display: none; }
  body.sb-collapsed .sb-label { visibility: visible; height: auto; padding: 0 10px 4px; }
  body.sb-collapsed .app-sidebar .header-nav-btn { justify-content: flex-start; padding: 0 10px; }
  body.sb-collapsed .app-sidebar .header-nav-btn > span { display: inline; }
  .dashboard-header .header-title, .dashboard-header .header-divider { display: none; }
}

/* the Process-Only build shows the process function alone: no sidebar */
body.pm-only .app-sidebar, body.pm-only .sb-toggle, body.pm-only .sb-scrim { display: none !important; }
body.pm-only .app-shell .pm-view { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .app-sidebar, .sb-collapse svg { transition: none; }
}