/* ================================================================
   SHARED COMPONENTS — Canonical patterns for 3Bids prototypes
   ================================================================
   Phase 1 of Bible Reconciliation. Defines the top 5 undocumented
   patterns so 140+ files stop reinventing them.

   Include AFTER atlas-shared.css:
     <link rel="stylesheet" href="shared/atlas-shared.css">
     <link rel="stylesheet" href="shared/components.css">

   ALL values reference brand-bible.css :root tokens.
   ZERO hardcoded colors, sizes, spacing, or radii.
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   Base + solid / outline / ghost variants + sizing
   ═══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  text-decoration: none;
}
.btn:hover { opacity: 0.85; }

/* Solid variants */
.btn-terra  { background: var(--terracotta);   color: var(--white); }
.btn-deep   { background: var(--deepBlue);     color: var(--white); }
.btn-admin  { background: var(--adminPrimary); color: var(--white); }
.btn-success { background: var(--success);     color: var(--white); }
.btn-danger  { background: var(--error);       color: var(--white); }

/* Outline variants */
.btn-outline       { background: transparent; border: var(--borderThin) solid var(--terracotta); color: var(--terracotta); }
.btn-outline.deep  { border-color: var(--deepBlue);     color: var(--deepBlue); }
.btn-outline.admin { border-color: var(--adminPrimary); color: var(--adminPrimary); }

/* Ghost (no border, no bg) */
.btn-ghost      { background: transparent; border: none; color: var(--terracotta); padding: var(--sp-sm); }
.btn-ghost.deep { color: var(--deepBlue); }

/* Sizing */
.btn-sm   { padding: var(--sp-xs) var(--sp-md);  font-size: var(--text-xs); }
.btn-lg   { padding: var(--sp-md) var(--sp-xxl); font-size: var(--text-md); }
.btn-full { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════
   STAT CARDS
   Dashboard stat pattern — card + value + label + grid
   ═══════════════════════════════════════════════════════════════════ */

.stat-card         { background: var(--white); border-radius: var(--radius-md); padding: var(--sp-lg); border-top: var(--borderAccent) solid var(--terracotta); }
.stat-card.blue    { border-top-color: var(--deepBlue); }
.stat-card.success { border-top-color: var(--success); }
.stat-card.info    { border-top-color: var(--info); }
.stat-card.warning { border-top-color: var(--warning); }
.stat-card.admin   { border-top-color: var(--adminPrimary); }

.stat-value         { font-size: var(--text-xl); font-weight: 800; color: var(--terracotta); }
.stat-value.blue    { color: var(--deepBlue); }
.stat-value.success { color: var(--success); }
.stat-value.info    { color: var(--info); }
.stat-value.admin   { color: var(--adminPrimary); }

.stat-label { font-size: var(--text-xs); color: var(--midGray); font-weight: 600; margin-top: var(--sp-xs); }

.stat-grid        { display: grid; gap: var(--sp-md); }
.stat-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.stat-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }


/* ═══════════════════════════════════════════════════════════════════
   AVATARS
   Two-letter initial circles — canonical sizes + role colors
   ═══════════════════════════════════════════════════════════════════ */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 700;
  flex-shrink: 0;
  color: var(--white);
  background: var(--terracotta);
}
.avatar.blue    { background: var(--deepBlue); }
.avatar.success { background: var(--success); }
.avatar.info    { background: var(--info); }
.avatar.admin   { background: var(--adminPrimary); }
.avatar.warning { background: var(--warning); }

/* Sizes — mapped to existing icon-circle token scale */
.avatar.sm { width: var(--sp-xxxl);  height: var(--sp-xxxl);  font-size: var(--text-xs); }
.avatar.md { width: var(--sp-xxxxl); height: var(--sp-xxxxl); font-size: var(--text-sm); }
.avatar.lg { width: var(--ic-lg);    height: var(--ic-lg);    font-size: var(--text-md); }
.avatar.xl { width: var(--ic-xl);    height: var(--ic-xl);    font-size: var(--text-lg); }


/* ═══════════════════════════════════════════════════════════════════
   FORMS
   Form groups, labels, inputs, selects, textareas, hints, errors
   ═══════════════════════════════════════════════════════════════════ */

.form-group { margin-bottom: var(--sp-lg); }

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: var(--sp-xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-input {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: var(--borderThin) solid var(--lightGray);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.15s;
}
.form-input:focus      { border-color: var(--terracotta); outline: none; }
.form-input.deep:focus { border-color: var(--deepBlue); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-md) center;
  padding-right: var(--sp-xxl);
}

.form-textarea { min-height: calc(var(--sp-xxxxl) * 2); resize: vertical; }
.form-hint  { font-size: var(--text-xs); color: var(--midGray); margin-top: var(--sp-xs); }
.form-error { font-size: var(--text-xs); color: var(--error);   margin-top: var(--sp-xs); }