/* ============================================================
   MedAlert — component states, keyframes, helpers
   ============================================================ */

/* ---- Buttons ---- */
.ma-btn {
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  user-select: none;
}
.ma-btn:active { transform: scale(.97); }
.ma-btn > span { white-space: nowrap; }

.ma-btn--primary { background: var(--brand-700); color: var(--brand-ink); box-shadow: var(--sh-1); }
.ma-btn--primary:hover { background: var(--brand-600); }
.ma-root[data-theme="dark"] .ma-btn--primary { background: var(--brand-700); }
.ma-root[data-theme="dark"] .ma-btn--primary:hover { background: var(--brand-600); }

.ma-btn--secondary { background: var(--brand-tint); color: var(--brand-700); }
.ma-btn--secondary:hover { background: var(--brand-tint-2); }
.ma-root[data-theme="dark"] .ma-btn--secondary { color: var(--brand-500); }

.ma-btn--ghost { background: transparent; color: var(--text-2); font-weight: 600; }
.ma-btn--ghost:hover { background: var(--surface-2); }

.ma-btn--outline { background-color: transparent; color: var(--text); border: 1.5px solid var(--border); }
.ma-btn--outline:hover { border-color: var(--brand-500); color: var(--brand-700); }

.ma-btn--taken { background: var(--taken); color: #fff; }
.ma-btn--taken:hover { background: var(--taken-strong); }

/* danger-outline: destructive but not primary (Switch user, Sign out) */
.ma-btn--danger-outline { background: transparent; color: var(--missed); border: 1.5px solid var(--missed); font-weight: 800; }
.ma-btn--danger-outline:hover { background: var(--missed-tint); }

/* ---- Card press (tappable) ---- */
.ma-tap { -webkit-tap-highlight-color: transparent; cursor: pointer; transition: transform .14s ease, box-shadow .18s ease; }
.ma-tap:active { transform: scale(.985); }

/* ---- Chip ---- */
.ma-chip {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  user-select: none;
}
.ma-chip:active { transform: scale(.95); }

/* ---- Inputs ---- */
.ma-input {
  font-family: inherit;
  width: 100%;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.ma-input::placeholder { color: var(--text-3); }
.ma-input:focus { border-color: var(--brand-500); background: var(--surface); box-shadow: var(--ring); }

/* ---- 4-dot loader (recreates Lottie medalert_loader.json) ---- */
.ma-loader { display: inline-flex; align-items: flex-end; gap: 10px; height: 30px; }
.ma-loader i {
  width: 13px; height: 13px; border-radius: 50%;
  background: #0062DB; display: block;
  animation: ma-dot 1.2s infinite ease-in-out both;
}
.ma-loader i:nth-child(1) { animation-delay: 0s; }
.ma-loader i:nth-child(2) { animation-delay: .15s; }
.ma-loader i:nth-child(3) { animation-delay: .30s; }
.ma-loader i:nth-child(4) { animation-delay: .45s; }
@keyframes ma-dot {
  0%, 70%, 100% { transform: translateY(0) scale(.66); opacity: .45; }
  35%           { transform: translateY(-16px) scale(1); opacity: 1; }
}

/* ---- Due-now soft pulse ---- */
@keyframes ma-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(199,120,0,.30); }
  70%  { box-shadow: 0 0 0 12px rgba(199,120,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(199,120,0,0); }
}
.ma-due-pulse { animation: ma-pulse-ring 2.4s infinite; }

/* ---- Progress ring sweep ---- */
@keyframes ma-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* No fill-mode: offscreen frames throttle the animation and `both` would
   freeze content at the invisible `from` state. Resting style stays visible. */
.ma-fade { animation: ma-fade-up .35s ease; }

/* ---- Check pop ---- */
@keyframes ma-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.ma-pop { animation: ma-pop .34s cubic-bezier(.34,1.56,.64,1); }

/* ---- Dialog ---- */
@keyframes ma-dlg-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ma-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.ma-dlg { animation: ma-dlg-in .26s cubic-bezier(.2,.8,.2,1) both; }
.ma-scrim { animation: ma-scrim-in .2s ease both; }

/* ---- collapse height for dose handled ---- */
.ma-collapse { transition: max-height .4s ease, opacity .3s ease, margin .3s ease, transform .3s ease; overflow: hidden; }

/* ---- Day cells (calendar) ---- */
.ma-day { -webkit-tap-highlight-color: transparent; cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease; }
.ma-day:active { transform: scale(.92); }

/* ---- segmented ---- */
.ma-seg { -webkit-tap-highlight-color: transparent; cursor: pointer; transition: color .18s ease; user-select: none; }

/* ---- push notification slide-down ---- */
@keyframes ma-push-in { from { opacity: 0; transform: translateY(-130%); } to { opacity: 1; transform: none; } }
.ma-push { animation: ma-push-in .42s cubic-bezier(.2,.9,.3,1.15); }

/* bottom sheet slide-up is transition-driven in the BottomSheet component (mount flag) — no keyframe, so it can never freeze hidden */

/* ---- shimmer (skeleton placeholders) ---- */
@keyframes ma-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }