/* monitorMyLawn — reusable UI components (cards, buttons, badges, forms, alerts). */

/* Cards */
.card {
  background: var(--mml-surface);
  border: 1px solid var(--mml-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card-hover:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-md); }
.card-title { font-size: 1rem; font-weight: 600; margin: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-size: .8125rem; font-weight: 500; line-height: 1;
  padding: .625rem 1rem; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
/* --mml-primary is a FILL colour; white on it is 4.07:1, which fails AA for a button
   label. The marketing redesign introduced --mml-primary-btn (5.11:1 light / 6.81:1
   dark) and overrode this rule for public pages only, leaving /app/* and /admin/*
   shipping the failing ratio — i.e. the contrast was fixed everywhere EXCEPT the
   screens paying customers actually use. Same token, applied at the source. */
.btn-primary { background: var(--mml-primary-btn); color: var(--mml-primary-btn-ink); }
.btn-primary:hover { background: var(--mml-primary-btn-hover); }
.btn-accent { background: var(--mml-accent); color: #fff; }
.btn-accent:hover { background: var(--mml-accent-dark); }
.btn-ghost { background: transparent; color: var(--mml-text); border-color: var(--mml-border); }
.btn-ghost:hover { background: var(--mml-surface-hover); }
.btn-danger { background: var(--mml-danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }

/* Account "danger zone" (destructive actions). */
.danger-zone { margin-top: var(--sp-xl); padding: var(--sp-lg); border: 1px solid var(--mml-danger-bd); border-radius: var(--r-md); background: var(--mml-danger-bg); }
.danger-zone__title { margin: 0 0 var(--sp-sm); color: var(--mml-danger); }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Badges / pills */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .688rem; font-weight: 600; padding: .2rem .55rem; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
/* 11px/600 text ⇒ the 4.5:1 threshold applies, so badges use the *-fg tokens
   (the base hue only clears 3.1–3.4:1 on its own tint). */
.badge-success { background: var(--mml-success-bg); color: var(--mml-success-fg); border-color: var(--mml-success-bd); }
.badge-warning { background: var(--mml-warning-bg); color: var(--mml-warning-fg); border-color: var(--mml-warning-bd); }
.badge-danger  { background: var(--mml-danger-bg);  color: var(--mml-danger-fg);  border-color: var(--mml-danger-bd); }
.badge-info    { background: var(--mml-info-bg);    color: var(--mml-info-fg);    border-color: var(--mml-info-bd); }
.badge-neutral { background: var(--mml-surface-hover); color: var(--mml-text-2); border-color: var(--mml-border); }

/* Forms */
.field { margin-bottom: var(--sp-lg); }
.field label { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: var(--sp-xs); }
.input, .select, .textarea {
  width: 100%; font: inherit; font-size: .875rem; color: var(--mml-text);
  background: var(--mml-surface); border: 1px solid var(--mml-border);
  border-radius: var(--r-md); padding: .625rem .75rem;
}
/* Focus: keep the soft ring for pointer focus, but give keyboard focus a real
   2px outline. The old `outline:none` + --mml-primary-50 ring measured 1.08:1
   (light) / 1.13:1 (dark) against the input surface, i.e. invisible. */
.input:focus, .select:focus, .textarea:focus { border-color: var(--mml-primary); box-shadow: 0 0 0 3px rgba(var(--mml-primary-rgb), .28); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--mml-primary); outline: 2px solid var(--mml-primary); outline-offset: 1px;
}
.field-error { color: var(--mml-danger); font-size: .75rem; margin-top: var(--sp-xs); }
.help { color: var(--mml-text-2); font-size: .75rem; margin-top: var(--sp-xs); }

/* Alerts / suggestion cards (left-border priority) */
.alert { border-left: 4px solid var(--mml-info); background: var(--mml-info-bg); padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-md); }
.alert-success { border-left-color: var(--mml-success); background: var(--mml-success-bg); }
.alert-warning { border-left-color: var(--mml-warning); background: var(--mml-warning-bg); }
.alert-danger  { border-left-color: var(--mml-danger);  background: var(--mml-danger-bg); }

/* Empty / loading states */
.empty-state { text-align: center; color: var(--mml-text-2); padding: var(--sp-3xl); }
.spinner {
  width: 22px; height: 22px; border: 3px solid var(--mml-border);
  border-top-color: var(--mml-primary); border-radius: 50%;
  animation: mml-spin .7s linear infinite; display: inline-block;
}
@keyframes mml-spin { to { transform: rotate(360deg); } }

/* Segmented control (chart range selector) */
.segmented { display: inline-flex; border: 1px solid var(--mml-border); border-radius: var(--r-md); overflow: hidden; }
.segmented button { border: 0; background: var(--mml-surface); color: var(--mml-text-2); padding: .4rem .8rem; font-size: .8125rem; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--mml-primary); color: #fff; }
/* .segmented has overflow:hidden, which clips an outward focus ring down to two
   ambiguous bars in the gaps. A negative offset draws it INSIDE the button box. */
.segmented button:focus-visible { outline: 2px solid var(--mml-primary); outline-offset: -3px; }
.segmented button[aria-pressed="true"]:focus-visible { outline-color: #fff; }