:root {
  --brand-navy: #0b2c54;
  --brand-navy-dark: #082140;
  --brand-gold: #f2a900;
  --brand-gold-dark: #cf9000;
}

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 var(--brand-navy);
}

/* Brand overrides. _Layout.cshtml.css (bundled into SafetyIQ.Web.styles.css) carries the same
   rules for pages using _Layout, but _AuthLayout (Login/ForgotPassword/ResetPassword) never
   references that bundle, so the rules are repeated here to cover both layouts. */
a {
  color: var(--brand-navy);
}

.btn-primary {
  color: #fff;
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff;
  background-color: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
}

.bg-brand {
  background-color: var(--brand-navy) !important;
  border-bottom: 3px solid var(--brand-gold);
}

.navbar-brand img {
  height: 32px;
  width: 32px;
  margin-right: 0.5rem;
}

.brand-logo-lg {
  height: 72px;
  width: 72px;
}

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;
}

/* <help> tag helper trigger (SafetyIQ.Web.TagHelpers.HelpTagHelper) - a clearly visible
   circled "?" next to a label/column header/heading that shows a Bootstrap tooltip or
   popover. Deliberately NOT text-muted/tiny - a help affordance nobody notices might as
   well not exist. */
.safetyiq-help {
  cursor: help;
  margin-left: 0.3rem;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 14px;
  min-height: 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--brand-navy);
  border-radius: 50%;
  color: var(--brand-navy);
  background-color: #fff;
}

.safetyiq-help:hover, .safetyiq-help:focus-visible {
  color: #fff;
  background-color: var(--brand-navy);
  outline: 2px solid var(--brand-gold);
  outline-offset: 1px;
}