/* Layout only. Everything else comes from Bootstrap 5; theme through --bs-* variables (from simple_portal's app.css). */
.app-sidebar { --app-sidebar-width: 240px; }

@media (min-width: 992px) {
  .app-sidebar {
    width: var(--app-sidebar-width);
    flex: 0 0 var(--app-sidebar-width);
    position: sticky;
    top: var(--app-navbar-height, 72px);
    height: calc(100vh - var(--app-navbar-height, 72px));
    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; }

/* A page's result, error and warning banners stay below the sticky navbar while the page scrolls,
   so a result from a button far down a form is still seen. Under the navbar (1020) and modals. */
.status-banners { position: sticky; top: var(--app-navbar-height, 72px); z-index: 1010; }
.status-banners > .alert { box-shadow: var(--bs-box-shadow-sm); }

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

.brand-logo { max-height: 48px; max-width: 100%; width: auto; }

/* The default logo's light and dark copies (CD-2190, `_logo.html`): the theme's own is shown. Fixed
   Bootswatch themes are dark but keep data-bs-theme="light", so data-looks-dark (theme scripts) decides. */
.brand-logo-dark, [data-looks-dark="true"] .brand-logo-light { display: none; }
[data-looks-dark="true"] .brand-logo-dark { display: inline; }

/* CD-2079: on wide screens the logo sits at the top of the sidebar, up to 216 × 100 px (the sidebar's
   240 px less padding); html.logo-wide (set in base.html) keeps a logo the sidebar would show shorter
   in the top bar instead. Phones keep it in the top bar. The hidden top-bar logo keeps its space, so
   the bar's height does not change. */
.sidebar-logo { display: none; }
@media (min-width: 992px) {
  .sidebar-logo { display: block; text-align: center; padding: .5rem .25rem 1rem; }
  .sidebar-logo .brand-logo { max-height: 100px; }
  html:not(.logo-wide) .navbar-brand { visibility: hidden; }
  .logo-wide .sidebar-logo { display: none; }
}

/* Phones: the menus take a second row under the logo, and a long login is cut short. */
@media (max-width: 575.98px) {
  .navbar > .container-fluid { flex-wrap: wrap; }
  .navbar .navbar-brand { flex: 1 1 0; min-width: 0; }
  .navbar .navbar-nav { width: 100%; justify-content: flex-end; }
  .navbar .nav-label { display: inline-block; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}

/* Sizes Bootstrap has no utility for. The CSP allows no style= attributes, so templates use these. */
.min-w-0 { min-width: 0 !important; }
.mw-400px { max-width: 400px; }
.mw-720px { max-width: 720px; }
.mw-960px { max-width: 960px; }
/* Send a Fax cover preview: a US Letter page. */
.cover-preview-frame { display: block; width: 100%; aspect-ratio: 8.5 / 11; border: 1px solid var(--bs-border-color); }