/* Layout only. Everything else comes from Bootstrap 5; theme through --bs-* variables. */
.app-sidebar { --app-sidebar-width: 270px; }

@media (min-width: 992px) {
  .app-sidebar {
    width: var(--app-sidebar-width);
    flex: 0 0 var(--app-sidebar-width);
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
  }
}

.app-sidebar .nav-link { padding: .25rem .75rem; color: var(--bs-body-color); border-radius: var(--bs-border-radius); }
.app-sidebar .nav-link:hover { background: var(--bs-tertiary-bg); }
.app-sidebar .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.app-sidebar .group-toggle { font-weight: 600; width: 100%; text-align: start; }
.app-sidebar .group-toggle::after { content: "▸"; float: right; transition: transform .15s; }
.app-sidebar .group-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
.app-sidebar .nav .nav { margin-left: .75rem; }

.theme-menu { min-width: 15rem; }
.theme-menu .theme-list { max-height: min(60vh, 28rem); overflow-y: auto; }

/* Sizes Bootstrap has no utility for. The CSP allows no style= attributes (CD-1863), so templates use these. */
.min-w-0 { min-width: 0 !important; }
.w-2-5rem { width: 2.5rem !important; }
.w-4-5rem { width: 4.5rem !important; }
.w-5rem { width: 5rem !important; }
.w-6rem { width: 6rem !important; }
.min-w-10rem { min-width: 10rem !important; }
.min-w-11rem { min-width: 11rem !important; }
.min-w-12rem { min-width: 12rem !important; }
.min-w-16rem { min-width: 16rem !important; }
.min-w-18rem { min-width: 18rem !important; }
.min-w-20rem { min-width: 20rem !important; }
.mw-8rem { max-width: 8rem !important; }
.mw-12rem { max-width: 12rem !important; }
.mw-14rem { max-width: 14rem !important; }
.mw-15rem { max-width: 15rem !important; }
.mw-16rem { max-width: 16rem !important; }
.mw-22rem { max-width: 22rem !important; }
.mw-32rem { max-width: 32rem !important; }
.mw-400px { max-width: 400px !important; }
.mw-760px { max-width: 760px !important; }
.mh-100px { max-height: 100px !important; }
.mh-14rem { max-height: 14rem !important; }
.mh-16rem { max-height: 16rem !important; }
.mh-24rem { max-height: 24rem !important; }
.text-pre-wrap { white-space: pre-wrap !important; }
.text-decoration-dotted { text-decoration-style: dotted !important; }
.btn-close.fs-xxs { font-size: .6rem !important; }

/* Dashboard charts (CD-1879): Chart.js fills this box when maintainAspectRatio is off. */
.chart-box { position: relative; height: 260px; }