/* You can add global styles to this file */
/* Colors are defined in assets/css/styles-colors.css */
/* Light mode: assets/css/light.css; dark mode: assets/css/dark.css */
/* These have to be imported to preserve the webpack paths: */
/* bootstrap CSS only -- JS bits come from ng-bootstrap */
@import '~bootstrap/dist/css/bootstrap.min.css';

/* Locally served material icon fonts  */
@import '~material-design-icons-iconfont/dist/material-design-icons.css';

:root {
  /* Spacing options, based on bootstrap's spacing utility
     classes, see
     https://getbootstrap.com/docs/5.0/utilities/spacing/ */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 3rem;
}

/** BS default fonts are huge */
body, .form-control, .btn, .input-group-text {
  /* This more or less matches the font size of the angularjs client.
   * The default BS4 font of 1rem is comically large.
   */
  font-size: .88rem;
  }
h1 {
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0;
}
h2 {
  font-size: 1.25rem;
  font-weight: 550;
  color: var(--evergreen);
}
h3 {font-size: 1.15rem}
h4 {font-size: 1.05rem}
h5 {font-size: .95rem}

.small-text-1 {font-size: 85%}
.semibold {font-weight: 600;}
output {padding: 0.5rem 0;}

dl {
  margin-block: 1.5rem;
}

.dl-grid {
  display: grid;
  gap: 0.65rem 1rem;
  grid-template-columns: minmax(min-content, 10rem) 1fr;
  margin-block: 0;
}

.dl-grid.dl-label-value {
  gap: 0.65rem 3rem;
}

.dl-grid.dl-double-cols {
  grid-template-columns: repeat(4, max-content);
}

.dl-grid > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.dl-double-cols > div {
  gap: 0.65rem 2rem;
  grid-column: auto / span 2;
}

.dl-grid:not(.dl-double-cols) > :is(dt, .term),
.dl-grid:not(.dl-double-cols) > div :is(dt, .term) {
  grid-column: 1;
}

.dl-grid:not(.dl-double-cols) > :is(dd, .def),
.dl-grid:not(.dl-double-cols) > div > :is(dd, .def) {
  grid-column: 2;
}

/* align to the right */
.dl-terms-end > :is(dt, .term),
.dl-terms-end > div > :is(dt, .term),
.dl-defs-end > :is(dd, .def),
.dl-defs-end > div > :is(dd, .def) {
  text-align: end;
}

.dl-label-value > :is(dt, .term), 
.dl-label-value > div > :is(dt, .term) {
  font-weight: bold;
  margin: 0;
}

.dl-label-value > :is(dd, .def), 
.dl-label-value > div > :is(dd, .def),
.numeric {
  font-variant-numeric: tabular-nums lining-nums;
  text-align: end;
}

/* Use when headings are wanted for accessibility but text size should look normal and we don't want default margins */
.text-normal {
  color: var(--bs-body-color);
  font-size: .88rem;
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  margin: 0;
  padding: 0;
}

/** Use a default link color that achieves WCAG AA
 *  color contrast against a white background
 */
a,
.nav-link { 
  border-color: var(--primary-border);
  color: var(--primary);
}

a:not(.alert-link):is(:hover, :focus, :focus-visible),
.nav-link:is(:hover, :focus, :focus-visible) {
  border-color: var(--primary-hover);
  color: var(--primary-hover);
}

.btn-link {
  background-color: transparent;
  border-width: 0;
  color: var(--primary);
  padding: inherit;
}

.btn-link:is(:hover, :focus, :focus-visible),
.nav-link:is(:hover, :focus, :focus-visible) {
  color: var(--primary-hover);
}

.alert-link {
  text-decoration: underline;
}

.alert-link:is(:hover, :focus, :focus-visible) {
  filter: brightness(1.1);
}

a[target="_blank"]:not(:has(img)):after {
  display: inline;
  content: "open_in_new";
  font-family: "Material Icons";
  line-height: inherit;
  margin-inline-start: 0.25rem;
}

/** BS has flex utility classes, but none for specifying flex widths.
 *  BS class="col" is roughly equivelent to flex-1, but col-2 is not
 *  equivalent to flex-2, since col-2 really means 2/12 width. */
.flex-1 {flex: 1}
.flex-2 {flex: 2}
.flex-3 {flex: 3}
.flex-4 {flex: 4}
.flex-5 {flex: 5}
.flex-6 {flex: 6}

/** BS deprecated the well, but it's replacement is not quite the same.
 * Define our own version and expand it to a full "table".
 * */
.well-row {
  display: flex;
}
.well-table .well-label {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 4px;
  padding: 4px;
  min-height: 40px;
}

.well-table .well-label-no-flex {
  display: flex;
  align-items: center;
  margin: 4px;
  padding: 4px;
  min-height: 40px;
}

.well-table .well-value {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: var(--bs-body-bg-alt);
  border-radius: 5px;
  box-shadow: inset 0 1px 1px rgba(var(--bs-black-rgb), 0.5);
  padding: 4px;
  margin: 4px;
  min-height: 40px;
}

.btn.disabled, .btn:disabled {
  cursor: not-allowed;
}

/* copies color/border/elements from above sans position elements */
.well-like {
  background-color: var(--bs-light);
  color: var(--bs-dark);
  border-radius: 5px;
  box-shadow: inset 0 1px 1px rgba(var(--bs-black-rgb), 0.5);
}

/* usefuf for mat-icon buttons without any background or borders */
.material-icon-button {
  /* Transparent background */
  border: none;
  background-color: transparent;
  padding-left: .25rem;
  padding-right: .25rem; /* default .5rem */
}

.mat-icon-in-button {
    line-height: inherit;
}

.mat-icon-shrunk-in-button {
    line-height: inherit;
    font-size: 18px;
}

.material-icons.small {
  font-size: 18px;
}

.input-group .mat-icon-in-button {
    font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
}

.material-icons {
  /** default is 24px which is pretty chunky */
  font-size: 22px;
}

/* allow spans/labels to vertically orient with material icons */
.label-with-material-icon {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}

.btn:has(.material-icons) {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  line-height: inherit;
}

.btn .material-icons {
  font-size: 1.2rem;
}

/* dropdown menu link/button with no downward carrot icon */
.no-dropdown-caret::after {
    display: none;
}

/* Default .card padding is extreme */
.tight-card .card-body,
.tight-card .list-group-item {
  padding: .25rem;
}
.tight-card .card-header {
  padding: .5rem;
}

@media all and (min-width: 800px) {
    /* scrollable typeahead menus for full-size screens */
    ngb-typeahead-window {
        height: auto;
        max-height: 200px;
        overflow-x: hidden;
    }
}

/* Limit size of dropdown menus and allow for scrolling */
.scrollable-menu {
  height: auto;
  max-height: 300px;
  overflow-y: auto;
  font-size: 99%;
}

/* Items stick to the top of the page once scrolled past,
 * leaving room above for the nav bar */
.sticky-top-with-nav {
  top: 48px;
  position: sticky;
  /* Sticky menus display above sticky grid headers */
  z-index: 2;
}

/* --------------------------------------------------------------------------
/* Form Validation CSS - https://angular.io/guide/form-validation
 * Required valid fields are left-border styled in green-ish.
 * Invalid fields are left-border styled in red-ish.
 */

.form-validated .ng-valid[required]:not(:is(fieldset, form)),
.form-validated .ng-valid.required, 
.form-validated input[formcontrolname].ng-valid.required {
  border-left: 5px solid var(--bs-form-valid-border-color);
  animation-name: fadeInBorder;
  animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.35s;
}

.form-validated .ng-invalid:not(:is(fieldset, form)),
.form-validated input[formcontrolname].ng-invalid,
.form-validated .invalid:not(:is(form)) {
  border-left: 5px solid var(--bs-form-invalid-border-color);
  animation-name: fadeInBorder;
  animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.35s;
}

.form-control.ng-valid.ng-touched ~ .invalid-feedback {
  display: none;
}

.valid-feedback,
.invalid-feedback {
  display: block;
  margin: 0;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.35s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeInBorder {
	0% {
		border-left-color: var(--border);
    border-left-width: 1px;
	}
	100% {
		border-left-color: var(--bs-form-invalid-border-color);
    border-left-width: 5px;
	}
}

/* Typical form CSS.
 * Brings font size down 5% to squeeze a bit more in.
 * Bold labels
 * Fixes some bootstrap margin funkiness with checkboxes for
 * better vertical alignment.
 * Optional faint odd or even row striping.
 */
.common-form {
  font-size: 95%;
}
.common-form .row {
  margin: 5px;
  padding: 3px;
}

.common-form label {
  font-weight: bold;
}

.common-form.striped-even .row:nth-child(even),
  .striped-rows-even .row:nth-child(even) {

  background-color: var(--bs-body-bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.common-form.striped-odd .row:nth-child(odd),
  .striped-rows-odd .row:nth-child(odd) {

  background-color: var(--bs-body-bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

option[disabled] {
  color: rgba(0,0,0, 0.3);
}

[data-bs-theme="dark"] option[disabled] {
  color: rgba(255,255,255, 0.6);
}

input, textarea, select, option, 
.form-control, .form-control:focus, .form-select {
  --bs-border-color: var(--form-control-border);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

input[type="checkbox"], .form-check-input {
  --bs-border-color: var(--form-check-border);
  --bs-border-width: 2px;
  appearance: revert;
  background-color: unset;
  background-image: unset;
  border-radius: 0.15rem;
  min-width: 1rem;
  min-height: 1rem;
}

/* Bootstrap's focus "outline" is a faint box shadow. Buttons have
   color-specific shadows, so let's leave those alone except for
   ones that are dropdown items. */
:not(button):not(.btn):is(:focus, :focus-visible),
.btn-link:is(:focus, :focus-visible),
button.dropdown-item:is(:focus, :focus-visible) {
  outline: 0.25rem solid rgba(var(--primary-focus-outline-rgb), 0.75);
  outline-offset: 0;
  --moz-outline-radius: 0.25rem;
}

.form-control::placeholder {
  color: var(--bs-gray-500);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--bs-gray-600);
}

.form-control:focus,
.form-control:focus-visible {
  box-shadow: unset;
  outline: 0.25rem solid rgba(var(--primary-focus-outline-rgb), 0.75) !important;
}

.form-control:disabled {
    background-color: var(--bs-body-bg-highlight);
}

input[type="checkbox"]:focus {
  outline-offset: 0.1rem;
}

/**
 * Only display the print container when printing
 */
#eg-print-container {
    display: none;
}
@media print {
  head {display: none} /* just to be safe */
  /* Display ONLY eg-print-container; Hide literally everything that is not above, below, or itself eg-print-container */
  *:not(:has(#eg-print-container)):not(#eg-print-container *):not(#eg-print-container) {
    display: none
  }
  @page {size: auto} /* work around Bootrap 4's default
                        of A3; specifying any paper
                        size stops browsers from letting
                        the user choose portrait or
                        landscape. LP#1986725 */
  #eg-print-container {display: block}
  #eg-print-container pre {border: none}
}

/**
 * Make sure that comboboxes (including org select
 * are visible, even in nested modals.
 *
 * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
 * for the upstream issue that necessitates this.
 */
body>.dropdown-menu {z-index: 2100;}

/* Styles for eg-daterange-select that don't work
 * in the component's CSS file.
 */
.ngb-dp-day:not(.disabled) .daterange-day.focused {
  background-color: var(--bs-gray-200);
}
.ngb-dp-day:not(.disabled) .daterange-day.range, .ngb-dp-day:not(.disabled) .daterange-day:hover {
  background-color: var(--primary);
  color: var(--bs-white);
}
.ngb-dp-day:not(.disabled) .daterange-day.faded {
  background-color: var(--bs-body-bg-highlight);
  color: var(--bs-black);
}

.bg-faint {
  background-color: var(--bs-body-bg);
}

/* Allow for larger XL dialogs */
@media (min-width: 1300px) { .modal-xl { max-width: 1200px; } }
@media (min-width: 1600px) { .modal-xl { max-width: 1500px; } }
@media (min-width: 1700px) { .modal-xl { max-width: 1600px; } }

.modal-lg, .modal-xl {
  min-height: 60vh;
}

/* Default modal background color */
.modal-dialog, .modal-body {
  background-color: var(--modal-body-bg);
}

.modal-header {
  background-color: var(--modal-header-bg);
}

/* Contrast for dialog titles */
.modal-header .modal-title {
  color: var(--modal-header-color);
  font-weight: 600;
}

.modal-header .close,
.modal-header .close:hover {
  color: var(--modal-header-color);
  opacity: 1;
  text-shadow: none;
}

.modal-header .close:not(:disabled):not(.disabled):focus, 
.modal-header .close:not(:disabled):not(.disabled):hover {
  opacity: 1;
}

/**
 * Make the acquisitions search form's navigation tabs match
 * those of the staff interface. This is a global rule because
 * various approaches to doing it local to the acq search component
 * don't work:
 *
 * 1. A rule bound to the container of the acq search tabset
 *    would make the entire background be grey.
 * 2. ":host ::ng-deep" for a local rule works, but depends on a
 *    mechanism that is deprecated.
 * 4. ng-tabset provides no hooks for custom styles for the nav-tab
 *    background.
 * 5. Turning off view encapsulation for the acq search component
 *    breaks a lot of styles.
 */
#acq-search-page ngbNav .nav.nav-tabs {
  background-color: var(--bs-body-bg);
}

/**
 * Similar to the CSS above for the search form, set some
 * CSS for the line item worksheet. Ordinarily would be
 * preferable to just add the CSS to the worksheet component,
 * but untl a well-supported alternative to ng-deep comes along...
 */
#worksheet-outlet thead th { 
  font-weight: bold; 
  background-color: var(--grid-header-row); 
  text-align: center; 
  border-bottom: 1px var(--bs-black) solid; 
  border-right: 1px var(--bs-black) solid; 
  padding: 0 6px; 
}
#worksheet-outlet tbody td { 
  text-align: left; 
  vertical-align: top; 
  border: 1px var(--bs-gray-500) inset; 
  padding: 0 2px; 
}

/* style for negative monetary values */
.negative-money-amount {
    color: var(--danger);
}

input.medium {
  width: 6em;
}

input.small {
  width: 4em;
}
/* 
 * Created initially for styled grid rows where full 'bg-danger' CSS is
 * intense and not especially readable, more so when rows are stacked.
 * http://web-accessibility.carnegiemuseums.org/design/color/
 */
 .less-intense-alert {
  background-color: var(--badge-danger-bg);
  color: var(--bs-dark);
}

/* Accessible button colors */

/* TODO */
button.input-group-text.text-danger {
  color: var(--bs-danger) !important;
}

.btn {
  color: var(--bs-body-color);
}

.btn:is(:hover, :focus, :focus-visible) {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-blue-600-rgb), .25);
}

.btn.btn-secondary {
  color: var(--bs-btn-color);
}

.input-group .btn:not([class*="btn-"]),
.input-group .btn[class*="btn-outline-"] {
  background-color: var(--btn-gray-bg);
}

.btn-light:hover,
.btn-light:focus,
.show > .btn-light.dropdown-toggle {
  background-color: var(--bs-body-bg-alt);
  color: var(--bs-secondary-color);
  border-color: var(--bs-secondary-color);
}

.btn-outline-secondary:is(:hover, :focus, :focus-visible) {
  color: var(--bs-secondary-color);
  background-color: transparent;
}

.btn-warning,
.btn-outline-warning {
  background: var(--badge-warning-bg);
  border-color: var(--warning-border);
  color: var(--bs-body-color);
}

/* other colors' focus state shadows do not need to change */
.btn-warning.focus,
.btn-warning:is(:hover, :focus, :focus-visible) {
  background-color: var(--badge-warning-hover-bg);
  border-color: var(--warning-border-hover);
  box-shadow: 0 0 0 .2rem var(--warning-shadow);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary-border);
  color: var(--bs-white);
}

.btn-primary:is(.hover, :hover, .focus, :focus, :focus-visible),
.btn-check:active + .btn-primary, 
.btn-check:checked + .btn-primary, 
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-hover);
  border-color: var(--primary-border);
  color: var(--bs-white);
}

.btn-outline-primary {
  background-color: var(--bs-body-bg);
  border-color: var(--primary-border);
  color: var(--primary-border);
}

.btn-outline-primary:is(.hover, :hover, .focus, :focus, :focus-visible) {
  background-color: var(--bs-body-bg);
  border-color: var(--primary-border);
  color: var(--primary-border);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--bs-white);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: var(--primary-disabled);
  background-color: var(--bs-body-bg);
  border-color: var(--primary-disabled);
}

.btn-info {
  background-color: var(--bs-cyan-700);
  border-color: var(--bs-cyan-600);
  color: white;
}

[data-bs-theme="dark"] .btn-info {
  border-color: var(--bs-cyan-800);
}

.btn-info:is(.hover, :hover, .focus, :focus, :focus-visible),
.btn-check:active + .btn-info, 
.btn-check:checked + .btn-info, 
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  background-color: var(--bs-cyan-600);
  border-color: var(--bs-cyan-600);
  color: white;
}

[data-bs-theme="dark"] .btn-info:is(.hover, :hover, .focus, :focus, :focus-visible),
[data-bs-theme="dark"] .btn-check:active + .btn-info, 
[data-bs-theme="dark"] .btn-check:checked + .btn-info, 
[data-bs-theme="dark"] .btn-info.active,
[data-bs-theme="dark"] .show > .btn-info.dropdown-toggle {
  border-color: var(--bs-cyan-800);
}

.btn-info.disabled, .btn-info:disabled {
  color: white !important;
}

.btn-outline-info {
  background-color: var(--bs-body-bg);
  border-color: var(--info-border);
  color: var(--bs-body-color);
}

.btn-outline-info:is(.hover, :hover, .focus, :focus, :focus-visible),
.btn-check:active+.btn-info,
.btn-check:checked+.btn-info,
.btn-info.active,
.btn-info:active,
.show>.btn-info.dropdown-toggle {
  color: var(--bs-body-color);
  background-color: var(--badge-info-bg);
  border-color: var(--info-border);
}

.btn-info.disabled,
.btn-info:disabled {
  color: var(--bs-white);
  background-color: var(--info-disabled);
  border-color: var(--info-disabled);
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: var(--info-disabled);
  background-color: var(--bs-body-bg);
  border-color: var(--info-disabled);
}

.btn-success {
  background-color: var(--success);
  border-color: var(--success-border);
  color: var(--success-color);
}

.btn-success:is(.hover, :hover, .focus, :focus, :focus-visible), 
.btn-check:active + .btn-success, 
.btn-check:checked + .btn-success, 
.btn-success.active,
.show > .btn-success.dropdown-toggle {
  background-color: var(--success-hover);
  border-color: var(--success-hover);
  color: var(--success-hover-color);
}

.btn-outline-success {
  background-color: var(--bs-body-bg);
  border-color: var(--success);
  color: var(--success-color);
}

.btn-outline-success:is(.hover, :hover, .focus, :focus, :focus-visible) {
  background-color: var(--bs-body-bg);
  border-color: var(--success-hover);
  color: var(--success-hover-color);
}

.btn-success.disabled,
.btn-success:disabled {
  color: var(--bs-white);
  background-color: var(--success-disabled);
  border-color: var(--success-disabled);
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: var(--success-disabled);
  background-color: var(--bs-body-bg);
  border-color: var(--success-disabled);
}

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger-border);
  color: white;
}

.btn-danger:is(.hover, :hover, .focus, :focus, :focus-visible) {
  background-color: var(--danger-bg-hover);
}

.btn-normal,
.btn-destroy,
.btn-outline-normal:is(:active, :hover, :focus, :focus-visible) {
  color: var(--btn-gray-color);
  background-color: var(--btn-gray-bg);
  border: 1px solid var(--btn-gray-border);
}

.btn-normal:is(:active, :hover, :focus, :focus-visible) {
  color: var(--btn-gray-color);
  background-color: var(--btn-gray-bg-hover);
  border: 1px solid var(--btn-gray-border);
}

.btn-outline-normal,
.btn-outline-destroy {
  color: var(--btn-gray-color);
  background-color: transparent;
  border: 1px solid var(--btn-gray-border);
}

.btn-outline-normal:is(:active, :hover, :focus, :focus-visible) {
  color: var(--btn-gray-color);
  background-color: var(--btn-gray-bg);
  border: 1px solid var(--btn-gray-border);
}

.btn-normal[disabled],
.btn-destroy[disabled] {
  color: var(--bs-body-color);
  background-color: var(--btn-gray-bg);
  border: 1px solid var(--btn-gray-border);
}

.btn-outline-normal[disabled],
.btn-outline-destroy[disabled] {
  color: var(--btn-gray-border);
  background-color: transparent;
  border: 1px solid var(--btn-gray-border);
}

.btn-link.btn-destroy {
  background-color: transparent;
  border-color: transparent;
}

.btn-destroy:is(:active, :hover, :focus, :focus-visible),
.btn-link.btn-destroy:is(:active, :hover, :focus, :focus-visible) {
  color: var(--destroy-color);
  background-color: var(--bs-body-bg-highlight);
  border: 1px solid var(--danger-border);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-red-rgb), .25);
}

.btn-destroy:active {
  color: white;
  background-color: var(--danger);
  border: 1px solid var(--danger-border);
}

.btn-link.btn-destroy:active {
  color: var(--danger);
  background-color: transparent;
  border: 1px solid var(--danger-border);
}

.btn-outline-destroy:is(:hover, :focus, :focus-visible) {
  color: var(--destroy-color);
  background-color: transparent;
  border: 1px solid var(--danger-border);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-red-rgb), .25);
}

.btn-outline-destroy:active {
  color: var(--destroy-color);
  background-color: transparent;
  border: 1px solid var(--danger-border);
}

/* inset a solid outline instead of using Bootstrap's box-shadow style */
button.focus-border:focus,
button.focus-border:focus-visible {
    box-shadow: none;
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
}

/* Less intense, WCAG AAA-compliant badges */
.badge {
  border-width: 0;
  border-style: solid;
  font-weight: 400;
  font-size: .9em;
  line-height: .9em;
  padding-top: .15em;
}

.badge-primary,
.badge.text-bg-primary {
  background: var(--badge-bg);
  color: var(--badge-color);
}

.badge-secondary,
.badge.text-bg-secondary {
  background: var(--secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--border);
}

.badge-success,
.badge.text-bg-success {
  background: var(--badge-success-bg);
  color: var(--badge-success-color);
  border-color: var(--success-border);
}

.badge-danger,
.badge.text-bg-danger {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-color);
  border-color: var(--danger-border);
}

.badge-warning,
.badge.text-bg-warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-color);
  border-color: var(--warning-border);
}

.badge-info,
.badge.text-bg-info {
  background: var(--badge-info-bg);
  color: var(--badge-info-color);
  border-color: var(--info-border);
}

.badge-light,
.badge.text-bg-light {
  background: var(--bs-body-bg-highlight);
  color: var(--bs-body-color);
  border-color: var(--border);
}

.badge-dark,
.badge.text-bg-dark {
  background: var(--bs-gray-500);
  color: var(--bs-body-color);
  border-color: var(--border);
}

[data-bs-theme="dark"] .badge-dark,
[data-bs-theme="dark"] .badge.text-bg-dark {
  background:  var(--bs-gray-800);
}

.badge.border {
  border: 1px solid inherit;
}

/* 
 * https://getbootstrap.com/docs/5.0/migration/#content-reboot-etc
 * Links are underlined by default.
 */
a {
  text-decoration: none;
}

.input-group {
  flex-wrap: nowrap;
}

.input-group-text label,
.input-group-text button {
  border: 0;
  margin: 0;
  padding: 0;
}

.form-label.input-group-text {
  margin-bottom: inherit;
}

.popover-body {
  padding: 0;
}

/*
   CSS Cursor classes
*/
.pointer {
  cursor: pointer;
}

/* Fix tooltip link colors */
.tooltip .tooltip-inner a {
  color: inherit;
}

/* Drop shadows for dropdown menus and active tabs */
.nav-tabs:not(.flex-column) .nav-link {
  background-color: var(--bs-body-bg-alt);
  border-color: var(--border);
  padding: 0.5rem 0.85rem;
}

.nav-tabs:not(.flex-column) .nav-link.hover, 
.nav-tabs:not(.flex-column) .nav-link:hover,
.nav-tabs:not(.flex-column).card-nav-tabs .nav-link:hover {
  background-color: var(--bs-body-bg-highlight);
  border-color: var(--border);
}

.nav-tabs:not(.flex-column) .nav-link.active, 
.nav-tabs:not(.flex-column) .nav-link:active {
  background-color: var(--bs-body-bg);
  border-color: var(--border) var(--border) var(--bs-body-bg);
  box-shadow: 0 -0.35rem 0.35rem rgba(0, 0, 0, 0.07);
}

/* Vertical nav tabs */
.nav-tabs.flex-column .nav-item .nav-link, 
.nav-tabs.flex-column .nav-link {
  border-radius: 0;
  border-width: 0;
  padding: 0.375rem 0.25rem;
  text-align: left;
  width: 100%;
}

.nav-tabs.flex-column .nav-item .nav-link:hover, 
.nav-tabs.flex-column .nav-item .nav-link:focus {
  background-color: rgba(0,0,100,0.075);
}

[data-bs-theme="dark"] .nav-tabs.flex-column .nav-item .nav-link:hover, 
[data-bs-theme="dark"] .nav-tabs.flex-column .nav-item .nav-link:focus {
  background-color: var(--bs-body-bg-highlight);
}

.nav-tabs.flex-column .nav-item.show .nav-link, 
.nav-tabs.flex-column .nav-link.active {
  background-color: rgba(var(--bs-blue-600-rgb), 0.1);
  font-weight: bold;
}

[data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link:hover, 
[data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link:focus,
[data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link.active, 
[data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link:active {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg-highlight);
  border: 1px solid var(--btn-gray-border);
  box-shadow: 0 -0.35rem 0.35rem rgba(var(--box-shadow), 0.65);
}

[data-bs-theme="dark"] .nav-tabs:not(.flex-column) .nav-link {
  border-bottom-color: var(--btn-gray-border);
}

/* tabs on cards should match the card */
.nav-tabs.card-nav-tabs:not(.flex-column) .nav-link {
  background-color: var(--bs-gray-200);
  border-color: var(--border);
}

[data-bs-theme="dark"] .nav-tabs.card-nav-tabs:not(.flex-column) .nav-link {
  background-color: var(--bs-body-bg);
}

.nav-tabs.card-nav-tabs:not(.flex-column) .nav-link:active, 
.nav-tabs.card-nav-tabs:not(.flex-column) .nav-link.active {
  background-color: var(--bs-body-bg-alt);
  border-color: var(--bs-gray-500) var(--bs-gray-500) var(--bs-body-bg-alt);
}

.dropdown-menu.show {
    box-shadow: 0 0.1em 0.5em rgba(var(--box-shadow), 0.3);
}

[data-bs-theme="dark"] .dropdown-menu.show {
  box-shadow: 0 0.1em 1em rgba(var(--box-shadow), 0.7);
}

/* DARK MODE */
/* Bootstrap has some background colors set instead of using their own body
background/text variables. Crash override. We can remove this in Bootstrap 5.3.
/**/
.card,
.eg-grid-content-body > div:nth-child(2n+1):not(.eg-grid-row-selected),
.list-group-item,
.panel, .panel-body,
#patron-fixed-tabs,
.table {
    background: var(--bs-body-bg);
    border-color: var(--border);
    color: var(--bs-body-color);
}

.modal-body .list-group-item {
  background-color: inherit;
}

.bg-light, .bg-white,
[data-bs-theme="dark"] .btn-light:active,
[data-bs-theme="dark"] .btn-outline-dark:active {
  background: inherit !important;
  color: inherit !important;
}

legend,
.eg-grid-cell {
    color: var(--bs-body-color);
}

.accordion-button:not(.collapsed),
.btn-light,
.card-header,
.eg-grid-header,
.eg-grid-sticky-header,
.panel-header,
.popover, 
.popover-body,
.tooltip-inner,
.well {
    background: var(--bs-body-bg-alt);
    border-color: var(--border);
    color: var(--bs-body-color);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: .25rem 1rem;
  clear: both;
  font-weight: 400;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  background-color: var(--bs-body-bg);
  border-color: var(--border);
  color: var(--bs-body-color);
}

.dropdown-divider {
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--border-thick);
}

.patron-summary-alert, .patron-summary-alert-small {
  background: inherit;
  color: var(--bs-red-300);
}

[data-bs-theme="dark"] .patron-summary-alert, .patron-summary-alert-small {
  color: var(--bs-red-700);
}

[data-bs-theme="dark"] .text-dark {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .text-danger {
  color: var(--danger-color) !important;
}

[data-bs-theme="dark"] .border {
  border: 1px solid var(--border) !important;
}

[data-bs-theme="dark"] .btn-outline-dark {
  border-color: var(--border);
}

[data-bs-theme="dark"] .btn-outline-dark:disabled {
  color: var(--border);
}

[data-bs-theme="dark"] .btn-secondary {
  background-color: var(--bs-light-bg-subtle);
}


@media (forced-colors: active) or (prefers-contrast: forced) {
  .alert,
  .btn-link {
    border: 0;
  }

  .btn:focus {
    box-shadow: unset;
    outline: 0.2rem solid transparent;
  }

  .dropdown-toggle:after {
    border: 0;
    content: "\e5c5"; 
    font-family: "Material Icons";
    vertical-align: middle;
  }

  .dropdown.show .dropdown-toggle:after,
  .dropdown.open .dropdown-toggle:after {
    content: "\e5c7";
  }
}
