/**
 * Avista Care dashboard — component primitives.
 *
 * Token-driven, reusable building blocks shared across views (cards, badges, tabs,
 * empty/loading states, buttons, stat tiles). Prefer these over bespoke per-view
 * classes so the dashboard stays consistent. Requires avista-tokens.css.
 */

/* ── Card ─────────────────────────────────────────────── */
.av-card {
  background: var(--av-surface);
  border: 1px solid var(--av-line);
  border-radius: var(--av-radius);
  padding: 12px 14px;
}
.av-card--pad { padding: var(--av-space-5); }
.av-card--lg { padding: 28px; }
.av-card--hover { transition: box-shadow var(--av-dur) var(--av-ease), border-color var(--av-dur) var(--av-ease); }
.av-card--hover:hover { box-shadow: var(--av-shadow-md); border-color: var(--av-line-2); }

/* ── Badge / pill ─────────────────────────────────────── */
.av-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--av-radius-pill);
  padding: 2px 8px;
  color: var(--av-faint);
  background: var(--av-fill);
  white-space: nowrap;
}
.av-badge--accent  { color: var(--av-accent);  background: var(--av-accent-soft); }
.av-badge--ok      { color: var(--av-success); background: var(--av-success-soft); }
.av-badge--warn    { color: var(--av-warn);    background: var(--av-warn-soft); }
.av-badge--danger  { color: var(--av-danger);  background: var(--av-danger-soft); }
.av-badge--info    { color: var(--av-info);    background: var(--av-info-soft); }

/* ── Segmented tabs ───────────────────────────────────── */
.av-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--av-fill);
  padding: 3px;
  border-radius: 9px;
}
.av-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--av-fs-sm);
  font-weight: 600;
  color: var(--av-muted);
  padding: 6px 12px;
  border-radius: 7px;
}
.av-tab:hover { color: var(--av-ink); }
.av-tab.is-active {
  background: var(--av-surface);
  color: var(--av-ink);
  box-shadow: var(--av-shadow);
}
.av-tab__count {
  font-size: var(--av-fs-xs);
  font-weight: 700;
  color: var(--av-faint);
  background: var(--av-line-2);
  border-radius: var(--av-radius-pill);
  padding: 1px 7px;
}
.av-tab.is-active .av-tab__count { color: var(--av-accent); background: var(--av-accent-soft); }

/* ── Empty state ──────────────────────────────────────── */
.av-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--av-faint);
}
.av-empty__icon { color: var(--av-line-2); display: inline-flex; margin-bottom: 12px; }
.av-empty__title { color: var(--av-muted) !important; font-weight: 600; font-size: var(--av-fs-md); }
.av-empty p { margin: 0; }
.av-empty__sub { font-size: var(--av-fs-sm); margin-top: 6px; }
/* Compact variant for empty slots inside cards (rank lists, chart panels). */
.av-empty--sm { padding: 24px 12px; border: 1px solid var(--av-line); border-radius: var(--av-radius-sm); background: var(--av-surface-2); }
.av-empty--sm .av-empty__title { font-size: var(--av-fs-sm); }

/* ── Skeleton / loading ───────────────────────────────── */
.av-skeleton {
  border-radius: var(--av-radius-sm);
  background: linear-gradient(90deg, var(--av-fill) 25%, #ececed 37%, var(--av-fill) 63%);
  background-size: 400% 100%;
  animation: av-shimmer 1.3s ease infinite;
}
@keyframes av-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Buttons ──────────────────────────────────────────── */
.av-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--av-fs-sm);
  font-weight: 600;
  border-radius: var(--av-radius-sm);
  padding: 7px 12px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--av-dur) var(--av-ease), color var(--av-dur) var(--av-ease), border-color var(--av-dur) var(--av-ease);
}
.av-btn--primary { background: var(--av-accent); color: var(--av-on-accent); }
.av-btn--primary:hover { background: var(--av-accent-strong); }
.av-btn--ghost { color: var(--av-accent); background: none; }
.av-btn--ghost:hover { background: var(--av-accent-soft); }
.av-btn--secondary { color: var(--av-ink); background: var(--av-surface); border-color: var(--av-line-2); }
.av-btn--secondary:hover { background: var(--av-surface-2); border-color: var(--av-faint); }

/* ── Metric tile (console kit: ChatsScreen metric strip) ──
   Small icon + dashed-underline label on top, quiet large value below. */
.av-metric__head { display: flex; align-items: center; gap: 7px; color: var(--av-muted); margin-bottom: 10px; }
.av-metric__label {
  font-size: var(--av-fs-sm);
  font-weight: 500;
  border-bottom: 1px dashed var(--av-line-2);
  padding-bottom: 1px;
}
.av-metric__value { font-size: 24px; font-weight: 600; color: var(--av-ink); line-height: 1.15; letter-spacing: -0.018em; }

/* ── Underline tabs (console kit: PageHeader tabs) ────── */
.av-tabs--line { display: flex; gap: 22px; background: none; padding: 0; border-bottom: 1px solid var(--av-line); border-radius: 0; }
.av-tabs--line .av-tab {
  padding: 9px 2px 11px;
  border-radius: 0;
  font-weight: 500;
  color: var(--av-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.av-tabs--line .av-tab:hover { color: var(--av-ink); background: none; }
.av-tabs--line .av-tab.is-active { color: var(--av-accent); background: none; box-shadow: none; border-bottom-color: var(--av-accent); }

/* ── Danger zone (console kit: SettingsScreen) ────────── */
.av-danger-zone { background: var(--av-danger-soft); border: 1px solid #f8dcdd; border-radius: var(--av-radius); padding: var(--av-space-5); }
.av-danger-zone__title { font-weight: 600; color: var(--av-ink); font-size: var(--av-fs-md); margin: 0 0 10px; }
.av-danger-zone .av-card { border-color: #f8dcdd; }
.av-btn--danger { background: var(--av-danger); color: #ffffff; }
.av-btn--danger:hover { background: var(--av-red-strong); }

/* ── Stat tile ────────────────────────────────────────── */
.av-stat { background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-radius); padding: var(--av-space-5); }
.av-stat__icon { color: var(--av-accent); margin-bottom: 10px; display: inline-flex; }
.av-stat__value { font-size: 26px; font-weight: 600; color: var(--av-ink); line-height: 1.15; letter-spacing: -0.01em; }
.av-stat__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--av-faint); margin-top: 6px; }

/* ── Button sizes / variants ──────────────────────────── */
.av-btn--lg { padding: 11px 22px; font-size: var(--av-fs-md); border-radius: var(--av-radius); }
.av-btn--danger-soft { color: var(--av-danger); background: var(--av-danger-soft); }
.av-btn--danger-soft:hover { background: #f8dcdd; }

/* ── Form controls ────────────────────────────────────── */
/* Reset the native <fieldset> chrome (border/margin/padding); min-width:0 fixes the fieldset grid/flex sizing quirk. */
.av-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.av-field { display: flex; flex-direction: column; gap: 6px; }
.av-label { display: block; font-size: var(--av-fs-sm); font-weight: 600; color: var(--av-ink); }
.av-input {
  width: 100%;
  background: var(--av-surface);
  border: 1px solid var(--av-line-2);
  border-radius: var(--av-radius-sm);
  padding: 9px 12px;
  font: inherit;
  font-size: var(--av-fs-base);
  color: var(--av-ink);
  transition: border-color var(--av-dur) var(--av-ease), box-shadow var(--av-dur) var(--av-ease);
}
.av-input::placeholder { color: var(--av-faint); }
.av-input:focus {
  outline: none;
  border-color: var(--av-accent);
  box-shadow: var(--av-ring-focus);
}
.av-input:disabled { background: var(--av-surface-2); color: var(--av-muted); cursor: not-allowed; }
select.av-input { cursor: pointer; }

.av-range { width: 100%; height: 6px; cursor: pointer; accent-color: var(--av-accent); }

.av-dropzone {
  background: var(--av-surface-2);
  border: 1px dashed var(--av-line-2);
  border-radius: var(--av-radius);
}

/* ── Token utilities (dark-mode-ready replacements for Tailwind slate-* ) ──
   Color/background/border-color only — keep existing layout/width utilities.
   Because these reference tokens, a [data-theme=dark] token swap flips them.
   !important: the page also carries Breakdance global typography and Tailwind
   (element + layered rules whose light values happen to sit near our ink, so
   losing the cascade is invisible in light mode and catastrophic in dark).
   These utilities are terminal declarations and must always win. */
.av-text      { color: var(--av-ink) !important; }
.av-text-muted{ color: var(--av-muted) !important; }
.av-text-faint{ color: var(--av-faint) !important; }
.av-text-accent{ color: var(--av-accent) !important; }
.av-bg        { background-color: var(--av-surface) !important; }
.av-bg-soft   { background-color: var(--av-surface-2) !important; }
.av-bg-fill   { background-color: var(--av-fill) !important; }
.av-bg-faint  { background-color: var(--av-faint) !important; }
.av-bd        { border-color: var(--av-line) !important; }
.av-bd-2      { border-color: var(--av-line-2) !important; }
/* hover / group-hover variants (these tokens are used with state prefixes in the renderers) */
.hover\:av-text:hover     { color: var(--av-ink) !important; }
.hover\:av-bg-soft:hover  { background-color: var(--av-surface-2) !important; }
.hover\:av-bg-fill:hover  { background-color: var(--av-fill) !important; }
.hover\:av-bd-2:hover     { border-color: var(--av-line-2) !important; }
.group:hover .group-hover\:av-text-muted { color: var(--av-muted) !important; }

/* ── PageHeader (Core: view title + description + actions row) ── */
.av-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--av-space-4); padding: 0 0 var(--av-space-4); }
.av-pagehead__title { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--av-ink) !important; margin: 0; }
.av-pagehead__desc { font-size: var(--av-fs-base); color: var(--av-muted); margin: 4px 0 0; max-width: 70ch; }
.av-pagehead__actions { display: flex; align-items: center; gap: var(--av-space-2); flex: 0 0 auto; }

/* ── Notice (Core: inline status message with accent bar) ── */
.av-notice {
  display: flex;
  gap: var(--av-space-3);
  padding: var(--av-space-3);
  border: 1px solid var(--av-line);
  border-radius: var(--av-radius-md);
  background: var(--av-surface);
  box-shadow: var(--av-shadow);
  font-size: var(--av-fs-sm);
  color: var(--av-muted);
}
.av-notice__accent { width: 3px; border-radius: var(--av-radius-pill); flex: 0 0 auto; background: var(--av-faint); }
.av-notice__body { flex: 1; min-width: 0; }
.av-notice__title { font-weight: 600; color: var(--av-ink); margin: 0 0 2px; }
.av-notice__text { color: var(--av-muted); margin: 0; }
.av-notice__actions { display: flex; gap: var(--av-space-2); margin-top: var(--av-space-2); }
.av-notice--info    { background: var(--av-info-soft);    border-color: var(--av-info-line); }
.av-notice--info    .av-notice__accent { background: var(--av-accent); }
.av-notice--success { background: var(--av-success-soft); border-color: var(--av-success-line); }
.av-notice--success .av-notice__accent { background: var(--av-success); }
.av-notice--warning { background: var(--av-warn-soft);    border-color: var(--av-warn-line); }
.av-notice--warning .av-notice__accent { background: var(--av-warn); }
.av-notice--danger  { background: var(--av-danger-soft);  border-color: var(--av-danger-line); }
.av-notice--danger  .av-notice__accent { background: var(--av-danger); }

/* ── Toast (Core: bottom-right stack; see AvistaUI.toast in avista-ui.js) ── */
.av-toaster { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: var(--av-space-2); z-index: 9990; }
.av-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--av-space-2);
  min-width: 280px;
  max-width: 380px;
  padding: var(--av-space-3);
  border: 1px solid var(--av-line);
  border-radius: var(--av-radius-md);
  background: var(--av-surface);
  box-shadow: var(--av-shadow-lg);
  font-size: var(--av-fs-sm);
  color: var(--av-muted);
  cursor: pointer;
  animation: av-toast-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.av-toast__icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--av-faint); }
.av-toast__icon--success { color: var(--av-success); }
.av-toast__icon--warning { color: var(--av-warn); }
.av-toast__icon--danger  { color: var(--av-danger); }
.av-toast__icon--info    { color: var(--av-accent); }
.av-toast__title { font-weight: 600; color: var(--av-ink); }
.av-toast__text { color: var(--av-muted); margin-top: 2px; }
@keyframes av-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Modal (Core: 14px radius, sunken footer, scrim token) ── */
.av-modal__scrim {
  position: fixed; inset: 0; z-index: 9980;
  background: var(--av-scrim, rgba(29,35,39,.55));
  display: flex; align-items: center; justify-content: center;
  padding: var(--av-space-6);
  animation: av-fade 0.12s var(--av-ease);
}
@keyframes av-fade { from { opacity: 0; } to { opacity: 1; } }
.av-modal {
  width: 100%; max-width: 520px;
  background: var(--av-surface);
  border: 1px solid var(--av-line);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-lg);
  overflow: hidden;
  animation: av-modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes av-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
.av-modal--sm { max-width: 400px; }
.av-modal--lg { max-width: 720px; }
.av-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--av-space-4); padding: var(--av-space-4) var(--av-space-5) 0; }
.av-modal__title { font-size: var(--av-fs-lg); font-weight: 600; color: var(--av-ink); margin: 0; }
.av-modal__desc { font-size: var(--av-fs-sm); color: var(--av-faint); margin: 4px 0 0; line-height: 1.5; }
.av-modal__body { padding: var(--av-space-4) var(--av-space-5); font-size: var(--av-fs-base); color: var(--av-ink); }
.av-modal__foot { display: flex; justify-content: flex-end; gap: var(--av-space-2); padding: var(--av-space-3) var(--av-space-5); border-top: 1px solid var(--av-line); background: var(--av-surface-2); }

/* ── Settings sections (Core: description column beside controls) ── */
.av-settings { display: flex; flex-direction: column; gap: var(--av-space-4); }
.av-settings__section { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--av-space-6); padding: var(--av-space-5); }
.av-settings__title { font-size: var(--av-fs-md); font-weight: 600; color: var(--av-ink) !important; margin: 0 0 4px; }
.av-settings__desc { font-size: var(--av-fs-sm); color: var(--av-muted); margin: 0; line-height: 1.5; max-width: 40ch; }
.av-settings__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--av-space-4) var(--av-space-5); align-content: start; max-width: 640px; }
.av-settings__controls .is-full { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .av-settings__section { grid-template-columns: 1fr; }
  .av-settings__controls { max-width: none; }
}
/* Sticky save bar — pins to the bottom of the content column while scrolling */
.av-savebar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; justify-content: flex-end; gap: var(--av-space-3); padding: var(--av-space-3) var(--av-space-5); background: var(--av-surface); border: 1px solid var(--av-line); border-radius: var(--av-radius); box-shadow: var(--av-shadow-md); }
.av-savebar__status { flex: 1 1 auto; min-width: 0; font-size: var(--av-fs-sm); }

/* ── Accessibility & motion ───────────────────────────── */
/* Visible keyboard focus on interactive primitives (mouse clicks stay clean via :focus-visible). */
.av-btn:focus-visible,
.av-tab:focus-visible {
  outline: 2px solid var(--av-accent);
  outline-offset: 2px;
}
/* Respect users who prefer reduced motion — neutralize the primitives' transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  .av-skeleton { animation: none; }
  .av-toast, .av-modal, .av-modal__scrim { animation: none; }
  .av-card--hover, .av-btn, .av-tab, .av-input { transition: none; }
}

/* ── Dark-theme adjustments ───────────────────────────────
   The danger-zone borders and skeleton shimmer carry light-only hexes;
   swap them under the dark theme so soft reds and shimmer stay legible. */
[data-theme="dark"] .av-danger-zone,
[data-theme="dark"] .av-danger-zone .av-card { border-color: #5c3335; }
[data-theme="dark"] .av-btn--danger-soft:hover { background: #5c3335; }
[data-theme="dark"] .av-skeleton { background: linear-gradient(90deg, var(--av-fill) 25%, #474e55 37%, var(--av-fill) 63%); background-size: 400% 100%; }