/* 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;
  /* The brand blue at full opacity (Bootstrap's is its own blue at 25%,
     about 1.4:1 on white). Used by .focus-ring and the rules below. */
  --bs-focus-ring-color: #1F4E8C;
  /* The edge of inputs, selects and unchecked checkboxes and radios. It is
     their only visible boundary, so it needs 3:1 (WCAG 1.4.11); the general
     --bs-border-color above stays light for cards and tables. */
  --dn-form-border-color: #6B7785;
}

/* Keyboard focus: one solid brand-blue ring everywhere (#264). Bootstrap sets
   outline:0 on these at the same or higher specificity, so they are listed
   by name; this file loads after Bootstrap, so equal specificity wins. */
:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible {
  outline: 3px solid var(--bs-focus-ring-color);
  outline-offset: 2px;
  box-shadow: none; /* Bootstrap's translucent glow would blur the ring */
}

.form-control,
.form-select,
.form-check-input {
  --bs-border-color: var(--dn-form-border-color);
}

/* The outline above replaces Bootstrap's faint focus glow on fields. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: none;
}

/* 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);
  padding-block: 1.5rem;
}

/* Even line lengths, so a wrapped heading doesn't leave two words alone. */
body.family :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
  text-wrap: balance;
}

@media (min-width: 768px) {
  .hero-section {
    padding-block: 2.5rem;
  }
}

.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, and by their
   adult children who order: 17px text, 15px small text, 19px lead and
   buttons at least 48px tall. The staff panel does not use this class. */
body.family {
  --bs-body-font-size: 1.0625rem;
  font-size: 1.0625rem;
}

body.family .small,
body.family small {
  font-size: 0.9375rem;
}

body.family .lead {
  font-size: 1.1875rem;
}

/* A comfortable reading width: Bootstrap's 1320px step is too wide for text. */
@media (min-width: 1400px) {
  body.family .container {
    max-width: 1140px;
  }
}

/* The hero headline: 40px from tablets up (phones have their own size below). */
@media (min-width: 768px) {
  body.family .hero-section h1 {
    font-size: 2.5rem;
  }
}

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

/* A button stretched to 48px keeps its label in the middle, not at the top.
   The gap stands in for the space after an icon, which flex drops. */
body.family .btn:not(.btn-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

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

/* Call pipeline: each provider's facts as a two-column list (label, value). */
body.staff .pipeline-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.75rem;
}

body.staff .pipeline-facts dt {
  font-weight: 600;
  color: var(--bs-secondary-color);
}

body.staff .pipeline-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

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

/* Call-days picker (_schedule_picker.html): seven day buttons in one row, also on a phone. */
.schedule-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .375rem;
}
.schedule-days .btn {
  min-height: 2.75rem;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schedule-time-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  margin-bottom: .5rem;
}
.schedule-time-row label { min-width: 5.5rem; }
.schedule-time-row .form-select { width: auto; min-width: 7rem; min-height: 2.75rem; }