/* Small UI fixes/overrides for Boomelytics */

:root {
  --boome-font-heading: "Raleway", "Glacial Indifference", "Public Sans", sans-serif;
  --boome-font-body: "Glacial Indifference", "Raleway", "Public Sans", sans-serif;
  --bs-font-sans-serif: var(--boome-font-body);
  --bs-body-font-family: var(--boome-font-body);
}

body {
  font-family: var(--boome-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--boome-font-heading);
}

#meliReportApp,
#amazonReportApp {
  font-family: var(--boome-font-body);
}

#meliReportApp h1,
#meliReportApp h2,
#meliReportApp h3,
#meliReportApp h4,
#meliReportApp h5,
#meliReportApp h6,
#amazonReportApp h1,
#amazonReportApp h2,
#amazonReportApp h3,
#amazonReportApp h4,
#amazonReportApp h5,
#amazonReportApp h6 {
  font-family: var(--boome-font-heading);
}

.notifier-container,
.daterangepicker,
.introjs-tooltipReferenceLayer,
.uppy-Root,
.uppy-u-reset,
.ql-container,
.ql-editor,
.ql-toolbar,
.swal2-container {
  font-family: var(--boome-font-body) !important;
}

/*
  Sidebar on mobile had a visible gap at the bottom.
  Root cause: `.pc-sidebar .navbar-content` reserves extra space via a fixed calc()
  (e.g. `height: calc(100vh - 149px)`), but our sidebar does not render a footer/user-card.

  Fix: make the sidebar wrapper a flex column and let the content area fill remaining
  space (with internal scrolling when needed).
*/

@media (max-width: 1024px) {
  .pc-sidebar {
    height: 100vh;
  }

  @supports (height: 100dvh) {
    .pc-sidebar {
      height: 100dvh;
    }
  }

  .pc-sidebar .navbar-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .pc-sidebar .navbar-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}