:root {
  --bs-primary: #008c95;
  --bs-primary-rgb: 0, 140, 149;
  --bs-link-color: #00737b;
  --bs-link-hover-color: #005f66;
}

.btn-primary {
  --bs-btn-bg: #008c95;
  --bs-btn-border-color: #008c95;
  --bs-btn-hover-bg: #00737b;
  --bs-btn-hover-border-color: #00737b;
  --bs-btn-active-bg: #005f66;
  --bs-btn-active-border-color: #005f66;
}

.btn-outline-primary {
  --bs-btn-color: #008c95;
  --bs-btn-border-color: #008c95;
  --bs-btn-hover-bg: #008c95;
  --bs-btn-hover-border-color: #008c95;
}

.text-primary {
  color: #008c95 !important;
}

.bg-primary,
.bg-label-primary {
  background-color: rgba(0, 140, 149, 0.14) !important;
  color: #00656d !important;
}

.app-brand-logo-mark svg {
  display: block;
}

/*
 * Native date/time inputs (input[type=date], [type=time], [type=datetime-local])
 * otherwise render with the browser's default unstyled calendar-picker-indicator icon,
 * which looks out of place next to Bootstrap-styled .form-control/.form-select siblings.
 * Bootstrap's own .form-control:focus rule already applies border-color/box-shadow using
 * --bs-primary, so we only need to theme the picker icon itself and normalize sizing.
 */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="month"].form-control,
input[type="week"].form-control {
  padding-top: 0.5375rem;
  padding-bottom: 0.5375rem;
  line-height: 1.5385;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator,
input[type="month"].form-control::-webkit-calendar-picker-indicator,
input[type="week"].form-control::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
  /* Tint the default black glyph to the app's teal brand color (--bs-primary: #008c95). */
  filter: invert(40%) sepia(87%) saturate(1000%) hue-rotate(140deg) brightness(90%) contrast(101%);
  transition: background-color 0.15s ease-in-out;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="time"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="month"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="week"].form-control::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.14);
}

input[type="date"].form-control:focus,
input[type="datetime-local"].form-control:focus,
input[type="time"].form-control:focus,
input[type="month"].form-control:focus,
input[type="week"].form-control:focus {
  border-color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--bs-primary-rgb), 0.3);
}

[data-bs-theme="dark"] input[type="date"].form-control::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"].form-control::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"].form-control::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="week"].form-control::-webkit-calendar-picker-indicator {
  /* Brighten the tinted glyph so it stays visible against dark surfaces. */
  filter: invert(60%) sepia(87%) saturate(1000%) hue-rotate(140deg) brightness(110%) contrast(101%);
}

/* Firefox does not support ::-webkit-calendar-picker-indicator; align its native picker sizing instead. */
@-moz-document url-prefix() {
  input[type="date"].form-control,
  input[type="datetime-local"].form-control,
  input[type="time"].form-control,
  input[type="month"].form-control,
  input[type="week"].form-control {
    color-scheme: light;
  }
}

/*
 * Status History timeline (Bookings > Details) uses the vendor ".timeline" component with
 * ".timeline-indicator" dots. The vendor rule paints each dot's masking ring in --bs-body-bg
 * (the page background), but every timeline we render lives inside a .card-body, whose actual
 * surface color is --bs-paper-bg. Because the two colors differ, the ring shows up as a
 * mismatched patch that visually overlaps/cuts into both the vertical connector line and the
 * card surface around each dot. Rescope the ring (and its indicator background) to the card's
 * own surface color so it blends instead of overlapping.
 */
.card-body .timeline .timeline-item .timeline-indicator {
  box-shadow: 0 0 0 10px var(--bs-paper-bg);
}

/* Give indicator dots breathing room so short status-history entries don't let one item's
 * ring/icon overlap the next item's dot or header text. */
.card-body .timeline .timeline-item {
  padding-block-end: 0.25rem;
}
.card-body .timeline .timeline-item .timeline-event {
  min-block-size: 2.5rem;
}