/* ===========================================================================
   FinLens — Components
   Buttons, cards, badges, alerts, modals, toasts. Token-driven.
   =========================================================================== */

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--btn-py) var(--btn-px);
  font-size: var(--btn-fs);
  font-weight: var(--btn-weight);
  text-transform: var(--btn-tt);
  letter-spacing: var(--btn-ls);
  border-radius: var(--btn-radius);
  border: var(--bw-thin) solid transparent;
  background: var(--btn-bg-primary);
  color: var(--btn-fg-primary);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover    { background: var(--btn-bg-primary-hover); text-decoration: none; }
.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }

.btn--secondary {
  background: var(--btn-bg-secondary);
  color: var(--btn-fg-secondary);
  border-color: var(--btn-border-secondary);
}
.btn--secondary:hover { background: var(--btn-bg-secondary-hover); }

.btn--danger {
  background: var(--btn-bg-danger);
  color: var(--btn-fg-danger);
}
.btn--danger:hover { background: var(--btn-bg-danger-hover); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--btn-bg-ghost-hover); }

.btn--sm { padding: 6px var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { padding: 14px var(--sp-6); font-size: var(--fs-base); }

.btn--block { width: 100%; }

/* ---- Cards ---------------------------------------------------------------- */
.card {
  background: var(--card-bg);
  border: var(--bw-thin) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-thin) solid var(--color-border);
}
.card__title  { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.card__sub    { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 2px; }
.card__body   { font-size: var(--fs-base); }
.card__footer { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bw-thin) solid var(--color-border); }

/* ---- Badges --------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-py) var(--badge-px);
  font-size: var(--badge-fs);
  font-weight: var(--badge-weight);
  text-transform: var(--badge-tt);
  letter-spacing: var(--badge-ls);
  border-radius: var(--badge-radius);
  background: var(--badge-bg-default);
  color: var(--badge-fg-default);
  line-height: 1;
}
.badge--success { background: var(--badge-bg-success); color: var(--badge-fg-success); }
.badge--warn    { background: var(--badge-bg-warn);    color: var(--badge-fg-warn); }
.badge--danger  { background: var(--badge-bg-danger);  color: var(--badge-fg-danger); }
.badge--info    { background: var(--badge-bg-info);    color: var(--badge-fg-info); }

/* Status-specific (per spec §7) */
.badge--status-active     { background: var(--badge-bg-success); color: var(--badge-fg-success); }
.badge--status-trialing   { background: var(--badge-bg-info);    color: var(--badge-fg-info); }
.badge--status-past-due   { background: var(--badge-bg-warn);    color: var(--badge-fg-warn); }
.badge--status-canceled   { background: var(--badge-bg-default); color: var(--badge-fg-default); }
.badge--status-expired    { background: var(--badge-bg-default); color: var(--badge-fg-default); }
.badge--status-suspended  { background: var(--badge-bg-danger);  color: var(--badge-fg-danger); }
.badge--status-pending    { background: var(--badge-bg-warn);    color: var(--badge-fg-warn); }

/* ---- Alerts --------------------------------------------------------------- */
.alert {
  padding: var(--alert-padding);
  border-radius: var(--alert-radius);
  border: var(--bw-thin) solid var(--color-border);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.alert--success { background: var(--color-accent-bg); border-color: var(--color-accent); color: var(--color-accent); }
.alert--warn    { background: var(--color-warn-bg);   border-color: var(--color-warn);   color: var(--color-warn); }
.alert--danger  { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.alert--info    { background: var(--color-info-bg);   border-color: var(--color-info);   color: var(--color-info); }

/* ---- Modals --------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--modal-bg);
  border-radius: var(--modal-radius);
  padding: var(--modal-padding);
  max-width: var(--modal-max-w);
  width: calc(100% - 32px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.modal__title  { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.modal__body   { font-size: var(--fs-base); margin-bottom: var(--sp-5); }
.modal__footer { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* ---- Toasts --------------------------------------------------------------- */
.toast-stack {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: 1100;
}
.toast {
  background: var(--toast-bg);
  color: var(--toast-fg);
  padding: var(--toast-padding);
  border-radius: var(--toast-radius);
  font-size: var(--fs-sm);
  min-width: 220px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.toast--success { background: var(--color-accent); }
.toast--warn    { background: var(--color-warn); }
.toast--danger  { background: var(--color-danger); }

/* ---- Dropdowns ------------------------------------------------------------ */
.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--color-bg);
  border: var(--bw-thin) solid var(--color-border);
  border-radius: var(--br-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 180px;
  padding: var(--sp-1);
  z-index: 50;
}
.dropdown__menu[hidden] { display: none; }
.dropdown__item {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  border-radius: var(--br-sm);
  color: var(--color-text);
  text-decoration: none;
}
.dropdown__item:hover { background: var(--color-bg-subtle); text-decoration: none; }
.dropdown__divider { height: 1px; background: var(--color-border); margin: var(--sp-1) 0; }

/* ---- Stat tiles (used on dashboard, billing pages) ------------------------ */
.stat {
  border: var(--bw-thin) solid var(--color-border);
  padding: var(--sp-4);
  border-radius: var(--br-sm);
}
.stat__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}
.stat__value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.stat__delta { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--sp-1); }

/* ---- Empty state ---------------------------------------------------------- */
.empty {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  color: var(--color-text-muted);
}
.empty__title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: var(--sp-2); }
.empty__msg   { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }