/* MedMatch UI — unified button system (v1.0) */
/* Drop this in every page: <link rel="stylesheet" href="/assets/ui.css"> */

:root{
  --btn-radius: 12px;
  --btn-padding-y: .45rem;
  --btn-padding-x: .85rem;
  --btn-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --btn-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--btn-font);
  font-weight:600;
  font-size:.925rem;
  line-height:1;
  padding:var(--btn-padding-y) var(--btn-padding-x);
  border-radius:var(--btn-radius);
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition:transform .04s ease, box-shadow .2s ease, background-color .2s;
  box-shadow:var(--btn-shadow);
  white-space:nowrap;
}

.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; }

.btn-mini{ font-size:.82rem; padding:.35rem .6rem; border-radius:10px; }
.btn-lg{ font-size:1rem; padding:.6rem 1rem; border-radius:14px; }

/* Base (primary) - blue */
.btn-primary{
  background:#2563eb; /* indigo-600 */
  color:#fff;
  border-color:#1e40af;
}
.btn-primary:hover{ background:#1d4ed8; }
.btn-primary:focus{ outline:2px solid rgba(37,99,235,.35); outline-offset:2px; }

/* Secondary (gray) */
.btn-secondary{
  background:#f3f4f6;
  color:#111827;
  border-color:#e5e7eb;
}
.btn-secondary:hover{ background:#e5e7eb; }
.btn-secondary:focus{ outline:2px solid rgba(17,24,39,.15); outline-offset:2px; }

/* Success (green) */
.btn-success{
  background:#16a34a;
  color:#fff;
  border-color:#15803d;
}
.btn-success:hover{ background:#15803d; }
.btn-success:focus{ outline:2px solid rgba(22,163,74,.35); outline-offset:2px; }

/* Warning (amber) */
.btn-warning{
  background:#f59e0b;
  color:#111827;
  border-color:#d97706;
}
.btn-warning:hover{ background:#d97706; color:#fff; }
.btn-warning:focus{ outline:2px solid rgba(245,158,11,.4); outline-offset:2px; }

/* Danger (red) */
.btn-danger{
  background:#dc2626;
  color:#fff;
  border-color:#b91c1c;
}
.btn-danger:hover{ background:#b91c1c; }
.btn-danger:focus{ outline:2px solid rgba(220,38,38,.35); outline-offset:2px; }

/* Outline variants */
.btn-outline{ background:#fff; }
.btn-outline.btn-primary{ color:#1d4ed8; border-color:#1d4ed8; }
.btn-outline.btn-primary:hover{ background:#eff6ff; }

.btn-outline.btn-secondary{ color:#374151; border-color:#9ca3af; }
.btn-outline.btn-secondary:hover{ background:#f9fafb; }

.btn-outline.btn-success{ color:#16a34a; border-color:#16a34a; }
.btn-outline.btn-success:hover{ background:#ecfdf5; }

.btn-outline.btn-warning{ color:#d97706; border-color:#f59e0b; }
.btn-outline.btn-warning:hover{ background:#fffbeb; }

.btn-outline.btn-danger{ color:#dc2626; border-color:#dc2626; }
.btn-outline.btn-danger:hover{ background:#fef2f2; }

/* Icon slot */
.btn > .i{
  display:inline-block;
  width:1.1em; height:1.1em;
  line-height:1; flex:0 0 auto;
}

/* Simple pills (status) */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font:600 .78rem var(--btn-font);
  padding:.25rem .55rem; border-radius:999px;
  border:1px solid transparent;
}
.pill.gray{ background:#f3f4f6; color:#111827; border-color:#e5e7eb; }
.pill.green{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.pill.amber{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.pill.red{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }

/* Make <a> with role=button look like buttons automatically */
a[role="button"]{ @apply btn; } /* harmless if not using Tailwind */
a.btn, button.btn, input[type=submit].btn { text-decoration:none; }