:root {
  --body-font-size: 0.9375rem;

  /* Brand colors */
  --sh-orange: #f08c35;
  --sh-orange-light: #ffa559;
  --sh-orange-subtle: #ffe2c0;
  --sh-orange-salmon: rgba(240, 140, 53, 0.1);
}

html,
body {
  height: 100%;
  font-size: var(--body-font-size);
}

.mt-01 {
  margin-top: 0.15rem !important;
}

.fs-7 {
  font-size: 0.75rem;
}

.feather {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Auth */

.auth-form-container {
  width: 300px;
}

.auth-form {
  padding: 1rem;
}

.auth-form .form-floating:focus-within {
  z-index: 2;
}

.auth-form input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.auth-form input[type="password"],
.auth-form input[type="text"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Navigation */

.navbar-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar-nav .nav-link.active {
  border-bottom: 2px solid var(--sh-orange);
}

@media (min-width: 768px) {
  .sidebar {
    min-height: calc(100vh - 52px);
  }
}

.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.sidebar .list-group-item {
  padding: 0.3rem 0.7rem;
}

.sidebar .list-group-item span {
  font-size: 0.8rem;
}

.list-header {
  background-color: var(--sh-orange-subtle);
  border-left: 4px solid var(--sh-orange);
}

/* HTMX Transitions */
.htmx-indicator {
  z-index: 2;
  color: var(--sh-orange-light);
  pointer-events: none;
}

@keyframes highlight-border {
  0% {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  100% {
    border-color: #dee2e6;
    box-shadow: none;
  }
}

/* Forms */
.form-wide {
  max-width: 40rem;
}

/* form-select border highlight effect that fades out */
.highlight-effect {
  animation: highlight-border 1.5s ease-out;
}

/* Search bar */
.search-box .form-control {
  position: relative;
  padding-left: 2.375rem;
}
.search-box .inline-search-icon {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0.5rem;
  pointer-events: none;
  color: #aaa;
}

/* Metrics */
.metric {
  font-feature-settings: "tnum", "lnum";
}

/* Color coding */
.severity {
  font-weight: bold;
}

.severity-flooded {
  color: rgb(91 20 20) !important;
}

.severity-severe,
.severity-bad {
  color: red !important;
}

.severity-high,
.severity-moderate-high,
.severity-poor,
.severity-dry {
  color: #fd7e14 !important;
}

.severity-moderate,
.severity-fair,
.severity-damp {
  color: #17a2b8 !important;
}

.severity-mild,
.severity-slightly-dry,
.severity-slightly-damp {
  color: #7cdfa0 !important;
}

.severity-normal,
.severity-great,
.severity-optimal {
  color: #28a745 !important;
}

/* Assessment page styling */
.assessment-header {
  background-color: var(--sh-orange-salmon);
  color: #555;
  padding: 0.5rem 1.5rem;
  border-radius: 50rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  min-width: 14rem;
}

.assessment-card {
  max-width: 17rem;
  width: 100%;
  height: 100%;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.assessment-card .card-header {
  background-color: var(--sh-orange-salmon);
  border: 0;
}

.assessment-card .card-header h6 {
  margin-bottom: 0;
  text-align: center;
  font-weight: 600;
  color: #555;
}

.diff-value {
  font-size: 0.65rem;
  margin-left: 0.1rem;
}

/* Assessment delayed animations */
.fade-in-reveal {
  position: relative;
  overflow: hidden;
}

.fade-in-reveal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 1;
  transform: translateY(0);
  transition: transform 0.8s ease-out;
}

.fade-in-reveal.animate::before {
  transform: translateY(100%);
}

/* Delayed rendering for observations - starts after 2.5s */
.fade-in-reveal.observations-delayed::before {
  animation: fadeInReveal 0.8s ease-out 2.5s both;
}

/* Delayed rendering for recommendations - starts after 5.5s (2.5s + 3s) */
.fade-in-reveal.recommendations-delayed::before {
  animation: fadeInReveal 0.8s ease-out 5.5s both;
}

/* Final HR element - appears after all animations complete (6.0s + 0.6s) */
.post-recommendation-fade-in-hr {
  opacity: 0;
  animation: fadeInHR 0.6s ease-out 6s both;
}

.post-recommendation-fade-in-full {
  opacity: 0;
  animation: fadeInFullOpacity 0.6s ease-out 6.3s both;
}

@keyframes fadeInReveal {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes visibility-sequence {
  0%,
  60% {
    opacity: 0;
    visibility: hidden;
  }
  60%,
  99% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeInHR {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.25;
  }
}

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

/* Loader visibility control */
.ai-loader.observations-loader {
  opacity: 1;
  visibility: visible;
  animation: hideLoader 0.3s ease-out 2.5s both;
}

.ai-loader.recommendations-loader {
  opacity: 0;
  visibility: hidden;
  animation: visibility-sequence 2.5s ease-out 3s both;
}

@keyframes hideLoader {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.ai-loader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ai-loader .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff6b35;
  animation: aiDots 1.4s ease-in-out infinite both;
}

.ai-loader .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.ai-loader .dot:nth-child(2) {
  animation-delay: -0.16s;
}

.ai-loader .dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes aiDots {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Bootstrap collapse toggle arrow indicators */
.arrow-toggle {
  white-space: nowrap;
}

.arrow-toggle[data-bs-toggle="collapse"]::before {
  content: "▸"; /* default to collapsed indicator */
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 1.15em;
  line-height: 1;
}

.arrow-toggle[data-bs-toggle="collapse"][aria-expanded="true"]::before {
  content: "▾";
}

.arrow-toggle[data-bs-toggle="collapse"][aria-expanded="false"]::before {
  content: "▸";
}