/* App-specific styles.

   Bootstrap 5.3 (bundled with dash-bootstrap-components) is the base design
   system. The former Skeleton CSS framework rules that used to live here were
   removed so Bootstrap's default component styling is used:
     - the `html { font-size: 62.5% }` 10px-rem hack (was shrinking every
       Bootstrap rem-based size to ~62.5%),
     - global `button` / `input` / `select` / `textarea` / `table` resets
       (were overriding dbc.Button / .form-control / dbc tables),
     - `.container`, `.navbar`, the Skeleton `.column`/`.columns` grid and the
       `.row:after` / `.container:after` float-clearfix (fought BS5 flexbox),
     - unused Skeleton utilities (`.button-primary`, `.u-*`) and the unused
       custom `.tooltip` block (which also collided with Bootstrap's tooltip).

   Only genuinely custom, app-specific classes remain below. */

/* Keep the app's light-grey page background (an app-level choice, not a
   Bootstrap-component override). Font size / color / family are left to
   Bootstrap's defaults. */
body {
  background-color: #f2f2f2;
}

/* Container / card helpers used across the dashboards */
.pretty_container {
  border-radius: 5px;
  background-color: #f9f9f9;
  margin: 6px;
  padding: 8px;
  position: relative;
  box-shadow: 2px 2px 2px lightgrey;
  height: max-content;
}

.flex-display {
  display: flex;
}

.container-display {
  display: flex;
}

#mainContainer {
  display: flex;
  flex-direction: column;
  font-family: "Ubuntu";
  /* clears the fixed collapsed sidebar (64px); grows to match when expanded */
  margin-left: 64px;
  transition: margin-left 0.2s ease-in-out;
}

/* pushed further right while the sidebar is expanded (see sidebar.css) */
#mainContainer.sidebar-expanded {
  margin-left: 236px;
}

/* Responsive tweaks for the custom containers on small screens */
@media (max-width: 550px) {
  .flex-display {
    display: block !important;
  }
  .container-display {
    display: flex;
  }
  .pretty_container {
    margin: 0 !important;
    margin-bottom: 25px !important;
    height: auto;
  }
  .mini_container {
    margin-bottom: 25px !important;
    border-radius: 5px;
    background-color: #f9f9f9;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 2px lightgrey;
  }
}