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

.mt-02 {
  margin-top: 0.27rem !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);
}

.list-header > div:first-child {
  margin-left: -3px;
}

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

/* Forms */
.form-narrow {
  max-width: 30rem;
}

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

.form-wide fieldset {
  margin-top: 0.6rem;
}

.form-wide legend {
  display: inline-block;
  background-color: var(--sh-orange-salmon);
  border-left: 4px solid var(--sh-orange);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}

/* form-select border highlight effect that fades out */

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

.highlight-effect {
  animation: highlight-border 1.8s ease-out;
}

/* Slimmer variant for small controls */
@keyframes highlight-border-sm {
  0% {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
  }
  100% {
    border-color: #dee2e6;
    box-shadow: none;
  }
}

.highlight-effect-sm {
  animation: highlight-border-sm 1.8s ease-out;
}

/* Row highlight effect with inner border */
@keyframes highlight-row {
  0% {
    box-shadow:
      inset 4px 0 0 var(--bs-success-border-subtle),
      inset 0 0 0 2px var(--bs-success-border-subtle);
  }
  100% {
    box-shadow: none;
  }
}

.highlight-row-effect {
  animation: highlight-row 2.5s ease-out;
}

/* Slimmer Bootstrap focus ring (only for -sm sized controls) */
.form-control.form-control-sm:focus,
.form-select.form-select-sm:focus {
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

/* Search bar */
.search-box .form-control {
  position: relative;
  padding-left: 2.375rem;
  padding-right: 3.25rem;
}
.search-box:focus-within .form-control {
  padding-right: 6rem;
}
.search-box .inline-search-icon {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0.5rem;
  pointer-events: none;
  color: #aaa;
}
@media (min-width: 576px) {
  .search-box {
    margin-left: auto;
  }
  .search-box .form-control {
    width: 13rem;
    transition: width 150ms ease;
  }
  .search-box:focus-within .form-control {
    width: 22rem;
  }
}
.search-box-shortcut-hint {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background-color: transparent;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.1rem 0.35rem;
  pointer-events: none;
  font-family: inherit;
}
.search-box-shortcut-close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: none;
  padding: 0.1rem 0.35rem;
  font-family: inherit;
  pointer-events: none;
}
.search-box-shortcut-close kbd {
  background-color: transparent;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
  color: inherit;
  font-family: inherit;
}
.search-box:focus-within .search-box-shortcut-open {
  display: none !important;
}
.search-box:focus-within .search-box-shortcut-close {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.platform-mac .search-box-shortcut-other,
.platform-other .search-box-shortcut-mac {
  display: none;
}

/* 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: 21rem;
  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 1.2s */
.fade-in-reveal.observations-delayed::before {
  animation: fadeInReveal 0.6s ease-out 1.2s both;
}

/* Delayed rendering for recommendations - starts after 3.6s (1.8s observations + 1.8s loader) */
.fade-in-reveal.recommendations-delayed::before {
  animation: fadeInReveal 0.6s ease-out 3.6s both;
}

/* Final HR element - appears after recommendations reveal (3.6s + 0.3s) */
.post-recommendation-fade-in-hr {
  opacity: 0;
  animation: fadeInHR 0.6s ease-out 3.9s both;
}

.post-recommendation-fade-in-full {
  opacity: 0;
  animation: fadeInFullOpacity 0.6s ease-out 4.2s 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 1.2s both;
}

.ai-loader.recommendations-loader {
  opacity: 0;
  visibility: hidden;
  animation: visibility-sequence 2.1s ease-out 1.7s 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.1rem;
  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: "▸";
}

/* Refresh progress bar */
.animate-progress {
  animation-name: countdown-progress;
  animation-timing-function: linear;
  animation-duration: var(--refresh-interval, 30s);
  animation-fill-mode: forwards;
}
@keyframes countdown-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animate-progress {
    animation: none;
    width: 100%;
  }
}

/* Settings pages */

.info-card,
.edit-card {
  width: 100%;
}

@media (min-width: 576px) {
  .info-card,
  .edit-card {
    width: 25rem;
  }
}

.edit-card {
  border-color: var(--sh-orange) !important;
}

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

/* Home card scrollable indicators */
.home-card-scrollable::-webkit-scrollbar {
  width: 6px;
}

.home-card-scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.home-card-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Fade gradient at bottom to indicate scrollable content */
.home-card-scrollable::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.home-card-scrollable:not(:hover)::after {
  opacity: 1;
}

/* Home card pagination - less visible */
.home-card-pagination .page-link {
  border: none;
  box-shadow: none;
}

.home-card-pagination .page-link:focus {
  box-shadow: none;
  outline: none;
}

.home-card-pagination .page-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.home-card-pagination .page-item.disabled .page-link {
  background-color: transparent;
  opacity: 0.3;
}

/* Patient list pin button - show on hover or when pinned */
.patient-row .pin-button {
  transition: opacity 0.2s ease;
}

.patient-row.show-pin .pin-button,
.patient-row .pin-button.pinned {
  opacity: 1 !important;
}

/* Flow zoom loading */
@keyframes loading-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

#flow-detail-loading {
  color: var(--sh-orange);
}

.flow-detail-loading-text {
  animation: loading-pulse 1.5s ease-in-out infinite;
}

/* Flow zoom placeholder */
@keyframes arrow-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.flow-detail-hint-arrow {
  display: inline-block;
  animation: arrow-bounce 1s ease-in-out infinite;
}

.flow-detail-hint-arrow:last-child {
  animation-delay: 0.15s;
}

/* Flow zoom */
#flow-zoom-controls {
  top: 24px;
  right: 50px;
  opacity: 0.4;
  transition: opacity 0.2s;
}

#flow-zoom-controls:hover {
  opacity: 1;
}

#flow-zoom-open {
  background-color: white !important;
  color: #0d6efd !important;
}

/* Assessment hint badge: purple variant (mirrors Bootstrap's text-bg-* pattern
   using its built-in --bs-purple). Used by the "low flow" clinical-pattern hint. */
.text-bg-purple {
  color: #fff !important;
  background-color: RGBA(var(--bs-purple-rgb, 111, 66, 193), var(--bs-bg-opacity, 1)) !important;
}

/* Report preview iframe (report detail + create/edit live preview).
   The report body renders in an isolated iframe with its own report.css, so the
   preview matches the PDF and is unaffected by the dashboard's CSS. The
   dashboard only sizes the frame to the A4 content width; the framed document
   posts its height so there is no inner scrollbar (see report_preview_frame.html). */
.report-detail-wrapper {
  width: 802px;
  max-width: 100%;
}

.report-preview-frame {
  display: block;
  width: 100%;
  border: 0;
}