/* html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
} */

.card-tools {
  margin-left: auto;
}

.logo-lg img {
  height: 40px;
}

/* Non-production environment banner (testing / unstable build warning). */
:root {
  --env-banner-height: 34px;
}

.env-banner {
  position: sticky;
  top: 0;
  z-index: 1006; /* above the sidenav (1005), below app toasts (1100) */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--env-banner-height);
  padding: 4px 16px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #212529;
  background-color: #ffc107;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.env-banner strong {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* The theme's sidenav is position:fixed (top:0) and the topbar is position:sticky
   (top:0), so both ignore the banner and would slide underneath it. Push them down
   by the banner height whenever the banner is present. */
body.has-env-banner .sidenav-menu {
  top: var(--env-banner-height);
}

body.has-env-banner .app-topbar {
  top: var(--env-banner-height);
}

/* --- Sidenav filter search ------------------------------------------------------------
   The box is pinned between the logo and the menu's scroll area. The theme sizes that
   scroll area as `calc(100% - topbar-height)`, so it has to lose the search box's height
   too or the bottom of the menu falls off-screen. */
:root {
  --sidenav-search-height: 52px;
}

.sidenav-menu [data-simplebar] {
  height: calc(100% - var(--theme-topbar-height) - var(--sidenav-search-height));
}

.sidenav-search {
  padding: 10px 14px 2px;
}

.sidenav-search .input-group-text,
.sidenav-search .form-control,
.sidenav-search .btn {
  background-color: transparent;
  border-color: var(--theme-sidenav-border-color);
  color: var(--theme-sidenav-item-color);
}

.sidenav-search .input-group-text,
.sidenav-search .btn {
  border-color: var(--theme-sidenav-border-color);
}

.sidenav-search .form-control::placeholder {
  color: var(--theme-sidenav-item-color);
  opacity: 0.6;
}

.sidenav-search .form-control:focus {
  border-color: var(--theme-sidenav-item-hover-color);
  color: var(--theme-sidenav-item-hover-color);
  box-shadow: none;
}

.sidenav-search .btn:hover {
  color: var(--theme-sidenav-item-hover-color);
}

/* Icon-only / narrow sidenav sizes have no room for the box (the theme hides
   .menu-text there too), so drop it and give its height back to the scroll area. */
html[data-sidenav-size="condensed"],
html[data-sidenav-size="compact"] {
  --sidenav-search-height: 0px;
}

html[data-sidenav-size="condensed"] .sidenav-search,
html[data-sidenav-size="compact"] .sidenav-search {
  display: none;
}

/* `on-hover` expands the sidenav on mouse-over (the theme narrows it with
   `.sidenav-menu:not(:hover)`), so keep the box's height reserved in both states and
   only hide it visually while collapsed. */
html[data-sidenav-size="on-hover"] .sidenav-menu:not(:hover) .sidenav-search {
  visibility: hidden;
}

/* Items filtered out by the current query, and the empty state when nothing matches. */
.side-nav .sidenav-search-hidden {
  display: none !important;
}

.sidenav-search-empty {
  padding: 14px 22px;
  font-size: 0.8125rem;
  color: var(--theme-sidenav-item-color);
  opacity: 0.7;
}

/* Quality Policy carousel: keep a stable height across slides.
   Bootstrap lays out only the .active slide, so the container collapses to each
   slide's content and jumps as you cycle. Stacking every slide in a single CSS
   grid cell makes the carousel size to the TALLEST slide and stay fixed; we then
   fade between them with visibility/opacity instead of relying on display. */
#carouselQP .carousel-inner {
  display: grid;
}

#carouselQP .carousel-item {
  display: block; /* override Bootstrap's display:none on inactive items */
  grid-area: 1 / 1; /* all slides share one cell → container = tallest slide */
  visibility: hidden;
  opacity: 0;
  transform: none; /* drop the slide transform; we cross-fade instead */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#carouselQP .carousel-item.active {
  visibility: visible;
  opacity: 1;
}

/* Let each card fill the shared cell so all slides visually match the tallest. */
#carouselQP .qp-container .card {
  height: 100%;
}

/* --- DataTables: legacy Inspinia export-buttons layout ------------------------------
   Migrated reports still use `dom: '<"html5buttons"B>l...'`. The old theme floated
   that container top-right, next to the search box; the new theme (DataTables 2.x)
   has no styles for it, so the Excel/Print buttons and the length menu rendered
   clipped / stacked over each other. Lay the whole container out with flexbox
   (no floats - they clipped against the tab/card chrome): length menu on the
   left, search box + export buttons together on the right, table full-width,
   info left / paging right under it. */
div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
}

/* The legacy Inspinia tab markup (.tabs-container / .panel-body) has no styles in
   the new theme, so tab content butts against the tab bar and looks clipped. */
.tabs-container .tab-content .panel-body {
  padding-top: 0.75rem;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > div.dt-length {
  order: 1;
  margin-right: auto;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > div.dt-length select {
  display: inline-block;
  width: auto;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > div.dt-search {
  order: 2;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > .html5buttons {
  order: 3;
  margin-left: 0.75rem;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > .html5buttons .dt-buttons {
  float: none;
  margin: 0;
  flex-wrap: nowrap;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > .html5buttons .dt-buttons .btn {
  margin: 0;
}

/* Legacy Inspinia button style used by every migrated report's Excel/Print
   buttons (className 'btn btn-white btn-sm'); the new theme doesn't define it,
   so they fell back to the plugin's solid default. */
.btn-white {
  --theme-btn-bg: #fff;
  --theme-btn-border-color: #dee2e6;
  --theme-btn-color: #313a46;
  --theme-btn-hover-bg: #f1f3f5;
  --theme-btn-hover-border-color: #ced4da;
  --theme-btn-hover-color: #313a46;
  --theme-btn-active-bg: #e9ecef;
  --theme-btn-active-border-color: #ced4da;
  --theme-btn-active-color: #313a46;
  background-color: #fff;
  border: 1px solid #dee2e6;
  color: #313a46;
}

.btn-white:hover, .btn-white:focus {
  background-color: #f1f3f5;
  border-color: #ced4da;
  color: #313a46;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > table.dataTable,
div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > div.dt-scroll,
div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > div.table-responsive {
  order: 4;
  flex: 0 0 100%;
  width: 100%;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > div.dt-info {
  order: 5;
  margin-right: auto;
  padding-top: 0.25rem;
}

div.dt-container:has(> :is(div.dt-length, div.dt-search, .html5buttons)) > div.dt-paging {
  order: 6;
  padding-top: 0.25rem;
}

/* DataTables 2 default layout (tables initialized without a legacy `dom`): the
   Bootstrap 5 integration renders each toolbar band as a `.row` whose negative
   gutter margins overflow the padding-less legacy containers (panel-body,
   table-responsive) and clip the length/search controls. Neutralize the gutters
   and keep the same standard: length left, search right, info left / paging
   right. */
div.dt-container.dt-bootstrap5 > div.row {
  margin-left: 0;
  margin-right: 0;
  row-gap: 0.5rem;
  align-items: center;
}

div.dt-container.dt-bootstrap5 > div.row:first-child {
  margin-top: 0.5rem;
}

div.dt-container.dt-bootstrap5 > div.row > div[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

div.dt-container div.dt-length select {
  display: inline-block;
  width: auto;
}

/* --- Row highlights vs striping ------------------------------------------------------
   The theme's striped overlay for contextual rows is a muddy gray
   (.table-danger sets --theme-table-striped-bg: #a0949b), so highlighted rows
   alternated two tones. Force one uniform tone under striping... */
.table-striped > tbody > tr.table-danger > *,
.table-striped > tbody > tr.table-warning > *,
.table-striped > tbody > tr.table-success > *,
.table-striped > tbody > tr.table-info > * {
  --theme-table-color-type: var(--theme-table-color);
  --theme-table-bg-type: var(--theme-table-bg);
}

/* ...and match the legacy reports' solid-red overdue rows (Inspinia #ed5565,
   white text) instead of the theme's pale pink tint. */
tr.table-danger {
  --theme-table-bg: #ed5565;
  --theme-table-color: #fff;
  --theme-table-striped-bg: #ed5565;
  --theme-table-striped-color: #fff;
  --theme-table-hover-bg: #e04352;
  --theme-table-hover-color: #fff;
  --theme-table-border-color: #e6495a;
}


/* --- Legacy (Inspinia) colour names -------------------------------------------------
   The classic-ASP reports were built on Inspinia, whose stylesheet SWAPS the meaning of
   "success" and "primary" and adds "navy". Translating those class names literally into
   Bootstrap 5 therefore gets the colour wrong, and the tell is always the same: anything
   that read `success` in the legacy was BLUE, and comes out green here.

     legacy class (style.css)         real colour     use here
     .label-success / .badge-success  #1c84c6 blue    .legacy-bg-success
     .text-success                    #1c84c6 blue    .legacy-text-success
     .btn-success.btn-outline         #1c84c6 blue    .legacy-text-success (+ border)
     .label-primary / .badge-primary  #1ab394 green   bg-primary  (this theme's primary is that green)
     .text-navy                       #1ab394 green   text-primary
     .text-primary                    inherit         no class at all
     .label-info / .text-info         #23c6c8 teal    info
     .text-warning                    #f8ac59         warning
     .text-danger / .label-danger     #ed5565         danger

   Scope: this applies to colour that was CARRIED OVER from an Inspinia class. New UI of
   our own — success toasts, "saved" states — is green on purpose; leave it alone.
   ------------------------------------------------------------------------------------ */
:root {
  --legacy-blue: #1c84c6;
  --legacy-green: #1ab394;
}

.legacy-text-success {
  color: var(--legacy-blue) !important;
}

.legacy-bg-success {
  background-color: var(--legacy-blue) !important;
  color: #fff !important;
  /* Beats the inset overlay Bootstrap paints over table cells, so the class also works
     on a badge rendered inside a grid. */
  box-shadow: none !important;
}