/* Ownercare custom theme layer on top of the Droplet theme.
   Shared by base.html (authenticated pages) and the standalone
   login / onboarding / setup pages. Uses Droplet's native palette. */

.oc-brand { font-weight: 700; letter-spacing: -.5px; }
.oc-brand span { color: var(--bs-primary); }

.health-score-ring { font-size: 2.5rem; font-weight: 700; }

/* Muted health-score tones (calmer than the bright semantic colors) */
.score-good  { color: #2f9e44; }
.score-watch { color: #d8923a; }
.score-poor  { color: #d6534d; }
.progress-bar.score-good  { background-color: #2f9e44; }
.progress-bar.score-watch { background-color: #d8923a; }
.progress-bar.score-poor  { background-color: #d6534d; }

/* Calmer condition stripes using Droplet's subtle border tokens */
.condition-SAF  { border-left: 3px solid var(--bs-danger-border-subtle); }
.condition-RR   { border-left: 3px solid var(--bs-warning-border-subtle); }
.condition-MM   { border-left: 3px solid var(--bs-info-border-subtle); }
.condition-SER  { border-left: 3px solid var(--bs-success-border-subtle); }

/* Soft badges — Droplet-consistent tinted pills instead of solid fills */
.badge-soft-primary   { color: var(--bs-primary-text-emphasis);   background-color: var(--bs-primary-bg-subtle); }
.badge-soft-success   { color: var(--bs-success-text-emphasis);   background-color: var(--bs-success-bg-subtle); }
.badge-soft-warning   { color: var(--bs-warning-text-emphasis);   background-color: var(--bs-warning-bg-subtle); }
.badge-soft-danger    { color: var(--bs-danger-text-emphasis);    background-color: var(--bs-danger-bg-subtle); }
.badge-soft-info      { color: var(--bs-info-text-emphasis);      background-color: var(--bs-info-bg-subtle); }
.badge-soft-secondary { color: var(--bs-secondary-color);         background-color: var(--bs-secondary-bg); }

.chat-bubble { border-radius: 12px; padding: .6rem 1rem; max-width: 80%; display:inline-block; }
/* Rendered-markdown niceties inside assistant bubbles */
.chat-bubble > :last-child { margin-bottom: 0; }
.chat-bubble p, .chat-bubble ul, .chat-bubble ol { margin-bottom: .5rem; }
.chat-bubble ul, .chat-bubble ol { padding-left: 1.25rem; }
.chat-bubble h1, .chat-bubble h2, .chat-bubble h3,
.chat-bubble h4, .chat-bubble h5, .chat-bubble h6 {
  font-size: 1rem; font-weight: 700; margin: .25rem 0 .5rem;
}
.chat-bubble code { background: rgba(0,0,0,.06); padding: 0 .25rem; border-radius: 4px; }
.chat-bubble pre { background: rgba(0,0,0,.06); padding: .5rem; border-radius: 8px; overflow-x: auto; }
/* User bubbles stay plain text; preserve their line breaks */
.chat-bubble.bg-primary { white-space: pre-wrap; }
.chat-message-right { width:100%; display:flex; justify-content:flex-end; }
.chat-message-left  { width:100%; display:flex; justify-content:flex-start; }
#chat-messages { height: 420px; overflow-y: auto; }

/* Compatibility shim: HOMER avatar/icon-circle utilities used in page content */
.avatar { display:inline-flex; align-items:center; justify-content:center; }
.avatar-xs { width:1.5rem;  height:1.5rem; }
.avatar-sm { width:2.25rem; height:2.25rem; }
.avatar-md { width:3rem;    height:3rem; }
.avatar-lg { width:4.5rem;  height:4.5rem; }
.avatar-title { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.avatar [data-lucide], .avatar-title [data-lucide] { width:1.1em; height:1.1em; }

/* Lucide sizing inside menu links */
.menu-icon [data-lucide] { width:1.1rem; height:1.1rem; }

/* Compatibility shim: HOMER font-size + page-title utilities used in page content */
.fs-10 { font-size: .625rem  !important; }
.fs-11 { font-size: .6875rem !important; }
.fs-12 { font-size: .75rem   !important; }
.fs-13 { font-size: .8125rem !important; }
.fs-16 { font-size: 1rem     !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-22 { font-size: 1.375rem !important; }
.fs-md { font-size: 1rem     !important; }
.fs-lg { font-size: 1.125rem !important; }
.fs-xl { font-size: 1.25rem  !important; }
.page-title-box { padding: .25rem 0 .75rem; }
.page-title { font-size: 1.25rem; font-weight: 600; }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }