/* Brand tokens, layered on top of Bootstrap 5.3's CSS custom properties
   (loaded before this file). Calm and trusted, in the register of Norwegian
   public-health sites: one deep blue, white and a very light blue-grey surface,
   near-black text, green only for success. Swap values here, not in templates,
   if the palette or font changes. The file name is historical. */
:root {
  /* Every text colour below is at least 4.5:1 (WCAG AA) on white and on the
     light surface; portal/test_contrast.py checks this file. White text on the
     same colours as a fill is checked too (badges, buttons). */
  --bs-primary: #1F4E8C;
  --bs-primary-rgb: 31, 78, 140;
  --bs-secondary: #4A5560;
  --bs-secondary-rgb: 74, 85, 96;
  --bs-success: #1E7B3C;
  --bs-success-rgb: 30, 123, 60;
  --bs-danger: #B02A37;
  --bs-danger-rgb: 176, 42, 55;
  --bs-link-color: #1F4E8C;
  --bs-link-color-rgb: 31, 78, 140;
  --bs-link-hover-color: #173D70;
  --bs-link-hover-color-rgb: 23, 61, 112;
  --bs-body-bg: #FFFFFF;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #1B1F23;
  --bs-body-color-rgb: 27, 31, 35;
  --bs-tertiary-bg: #F2F6FB;
  --bs-tertiary-bg-rgb: 242, 246, 251;
  --bs-border-color: #D9E2EC;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-font-sans-serif: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* No dark mode is shipped. When one is wanted, redefine the tokens above here:
[data-bs-theme="dark"] { }
*/

.navbar-brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--bs-primary) !important;
  letter-spacing: -0.01em;
}

/* The brand mark (Settings → Brand, or the committed default) next to the wordmark. */
.navbar-brand-mark {
  height: 2rem;
  width: auto;
}

.hero-section {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

.note-card {
  border-left: 4px solid var(--bs-primary);
}

.log-terminal {
  background: #1E1E1E;
  color: #8FE388;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  border-radius: var(--bs-border-radius-sm);
  padding: 0.75rem 1rem;
  max-height: 240px;
  overflow-y: auto;
}

.log-terminal .log-step {
  color: #7EC3E0;
}

/* Solid icon+label refresh buttons (health badges, provider/voice/model
   discovery) — deliberately more visually prominent than a plain link or
   outline button, since staff kept missing the old tiny "↻" glyphs. */
.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.btn-refresh .btn-refresh-icon {
  display: inline-block;
}

.btn-refresh:disabled .btn-refresh-icon {
  animation: btn-refresh-spin 0.8s linear infinite;
}

@keyframes btn-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.audio-level-meter {
  height: 0.5rem;
  background: var(--bs-tertiary-bg, #e9ecef);
  border-radius: var(--bs-border-radius-sm);
  overflow: hidden;
}

.audio-level-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--bs-primary);
  transition: width 60ms linear;
}

/* Collapsible sections on a person's page: a quiet disclosure triangle. */
.memory-details > summary {
  cursor: pointer;
  list-style: none;
}
.memory-details > summary::-webkit-details-marker {
  display: none;
}
.memory-details > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.15s;
}
.memory-details[open] > summary::before {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .memory-details > summary::before {
    transition: none;
  }
}

/* Small in-card actions (Remove, Delete, Always use) need a comfortable touch target. */
.card-body form .btn-link {
  min-height: 2.25rem;
  padding-inline: 0.25rem;
}

/* Bootstrap hard-codes its own blue, green, red and grey in these components, so
   the tokens above do not reach them. Same colours, set where Bootstrap reads them. */
.btn-primary {
  --bs-btn-bg: #1F4E8C;
  --bs-btn-border-color: #1F4E8C;
  --bs-btn-hover-bg: #173D70;
  --bs-btn-hover-border-color: #123059;
  --bs-btn-active-bg: #123059;
  --bs-btn-active-border-color: #0E2746;
  --bs-btn-disabled-bg: #1F4E8C;
  --bs-btn-disabled-border-color: #1F4E8C;
  --bs-btn-focus-shadow-rgb: 31, 78, 140;
}
.btn-outline-primary {
  --bs-btn-color: #1F4E8C;
  --bs-btn-border-color: #1F4E8C;
  --bs-btn-hover-bg: #1F4E8C;
  --bs-btn-hover-border-color: #1F4E8C;
  --bs-btn-active-bg: #1F4E8C;
  --bs-btn-active-border-color: #1F4E8C;
  --bs-btn-disabled-color: #1F4E8C;
  --bs-btn-disabled-border-color: #1F4E8C;
  --bs-btn-focus-shadow-rgb: 31, 78, 140;
}
.btn-outline-secondary {
  --bs-btn-color: #4A5560;
  --bs-btn-border-color: #4A5560;
  --bs-btn-hover-bg: #4A5560;
  --bs-btn-hover-border-color: #4A5560;
  --bs-btn-active-bg: #4A5560;
  --bs-btn-active-border-color: #4A5560;
  --bs-btn-disabled-color: #4A5560;
  --bs-btn-disabled-border-color: #4A5560;
  --bs-btn-focus-shadow-rgb: 74, 85, 96;
}
.btn-outline-success {
  --bs-btn-color: #1E7B3C;
  --bs-btn-border-color: #1E7B3C;
  --bs-btn-hover-bg: #1E7B3C;
  --bs-btn-hover-border-color: #1E7B3C;
  --bs-btn-active-bg: #1E7B3C;
  --bs-btn-active-border-color: #1E7B3C;
  --bs-btn-disabled-color: #1E7B3C;
  --bs-btn-disabled-border-color: #1E7B3C;
  --bs-btn-focus-shadow-rgb: 30, 123, 60;
}
.btn-outline-danger {
  --bs-btn-color: #B02A37;
  --bs-btn-border-color: #B02A37;
  --bs-btn-hover-bg: #B02A37;
  --bs-btn-hover-border-color: #B02A37;
  --bs-btn-active-bg: #B02A37;
  --bs-btn-active-border-color: #B02A37;
  --bs-btn-disabled-color: #B02A37;
  --bs-btn-disabled-border-color: #B02A37;
  --bs-btn-focus-shadow-rgb: 176, 42, 55;
}
.btn-success {
  --bs-btn-bg: #1E7B3C;
  --bs-btn-border-color: #1E7B3C;
  --bs-btn-hover-bg: #176330;
  --bs-btn-hover-border-color: #124F26;
  --bs-btn-active-bg: #124F26;
  --bs-btn-active-border-color: #0F4220;
  --bs-btn-disabled-bg: #1E7B3C;
  --bs-btn-disabled-border-color: #1E7B3C;
  --bs-btn-focus-shadow-rgb: 30, 123, 60;
}
.nav-pills {
  --bs-nav-pills-link-active-bg: #1F4E8C;
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: #1F4E8C;
}
.pagination {
  --bs-pagination-active-bg: #1F4E8C;
  --bs-pagination-active-border-color: #1F4E8C;
}

/* Bootstrap's yellow text is about 1.6:1 on white; use its own dark yellow-brown. */
.text-warning {
  color: var(--bs-warning-text-emphasis) !important;
}

/* Honeypot on public forms: out of sight, not display:none (some bots skip those). */
.hp-field { position: absolute; left: -9999px; }

/* The family site is read by people who are often over 60: 18px
   text and buttons at least 48px tall. The staff panel does not use this class. */
body.family {
  --bs-body-font-size: 1.125rem;
  font-size: 1.125rem;
}

body.family .btn,
body.family .form-control,
body.family .form-select {
  min-height: 3rem;
}

body.family .btn-sm {
  --bs-btn-font-size: 1rem;
  --bs-btn-padding-y: 0.5rem;
}

body.family .btn-link {
  min-height: 0;
}

.person-tabs .nav-link {
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

/* The four tabs of a person scroll sideways on a narrow screen instead of wrapping. */
.person-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.person-tabs::-webkit-scrollbar {
  display: none;
}

/* Phones: a smaller wordmark and headline, and the order button pinned beside the menu. */
@media (max-width: 767.98px) {
  .navbar-brand-wordmark {
    font-size: 1.5rem !important;
  }
  .navbar-brand-mark {
    height: 1.75rem;
  }
  .navbar-cta {
    min-height: 2.5rem;
    padding-inline: 0.75rem;
  }
  body.family .hero-section h1 {
    font-size: calc(1.3rem + 1.5vw);
  }
}

/* Staff panel: use the desktop width (capped for ultrawide screens) instead of
   Bootstrap's fixed container. The family portal keeps its narrow reading width. */
body.staff {
  --staff-max: 2000px;
}

body.staff .staff-wide {
  width: 100%;
  max-width: var(--staff-max);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Settings pages: a fixed-width sidebar beside the content. minmax(0, 1fr) lets the
   content column shrink, so a wide table scrolls inside itself, never the page. */
body.staff .settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 992px) {
  body.staff .settings-layout {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

/* The Activity tabs scroll sideways on a phone, like a person's tabs. */
body.staff .subnav {
  overflow-x: auto;
  scrollbar-width: none;
}

body.staff .subnav .nav-link {
  white-space: nowrap;
}

/* The Settings drawer on a phone keeps the sidebar's spacing; from 992px offcanvas-lg is a plain column. */
body.staff .offcanvas-lg.offcanvas-start {
  --bs-offcanvas-width: 18rem;
}

@media (max-width: 991.98px) {
  body.staff .offcanvas-body {
    padding-top: 0;
  }
}

/* Long unbroken strings (model names) wrap instead of forcing a scrollbar. */
body.staff .cell-wrap-anywhere {
  overflow-wrap: anywhere;
}