/* ════════════════════════════════════════
   COMPONENTS.CSS — Buttons · Forms · Badges · Cards
   Resource Atlas | DYFTZ
════════════════════════════════════════ */

/* ── Form Inputs ── */
.fi {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.fi:focus { border-color: var(--gold); background: rgba(255,255,255,.07); }
.fi::placeholder { color: var(--text-faint); }
select.fi option { background: #0d1527; }
textarea.fi { resize: none; line-height: 1.65; }

.lbl {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
  font-weight: 600;
}

/* ── Button Base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }

/* Primary — Gold fill */
.btn-primary {
  background: var(--gold);
  border: 2px solid var(--gold-light);
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
}
.btn-primary:hover { background: #d97706; border-color: var(--gold); }

/* Green — approve / confirm */
.btn-green {
  background: var(--green-dim);
  border: 1.5px solid var(--green);
  color: var(--green-light);
}
.btn-green:hover { background: rgba(34,197,94,.25); }

/* Amber — warn / revoke */
.btn-amber {
  background: rgba(245,158,11,.15);
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
}
.btn-amber:hover { background: rgba(245,158,11,.28); }

/* Red — delete / danger */
.btn-red {
  background: var(--red-dim);
  border: 1.5px solid var(--red);
  color: var(--red-light);
}
.btn-red:hover { background: rgba(239,68,68,.28); }

/* Ghost — neutral outlined */
.btn-ghost {
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.32);
  color: rgba(255,255,255,.82);
}
.btn-ghost:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.55); }

/* Purple — AI */
.btn-ai {
  background: var(--purple-dim);
  border: 1.5px solid var(--purple);
  color: var(--purple-light);
}
.btn-ai:hover { background: rgba(167,139,250,.28); }

/* Blue — info / map */
.btn-blue {
  background: var(--blue-dim);
  border: 1.5px solid var(--blue);
  color: var(--blue-light);
}
.btn-blue:hover { background: rgba(96,165,250,.28); }

/* ── Tab Buttons ── */
.tab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  font-family: inherit;
  white-space: nowrap;
}
.tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.tab:hover:not(.on) { color: rgba(255,255,255,.7); }

/* ── Chip Filter Buttons ── */
.chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.5);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  font-weight: 600;
}
.chip:hover { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.85); }

/* ── Badges ── */
.badge {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .02em;
  display: inline-block;
}
.badge-valid  { background: rgba(34,197,94,.15);   color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.badge-warn   { background: rgba(245,158,11,.15);  color: var(--gold-light); border: 1px solid rgba(245,158,11,.3); }
.badge-exp    { background: rgba(239,68,68,.15);   color: var(--red-light); border: 1px solid rgba(239,68,68,.3); }
.badge-pend   { background: rgba(245,158,11,.12);  color: var(--gold); border: 1px solid rgba(245,158,11,.25); }
.badge-role   { font-size: 9px; padding: 2px 7px; border-radius: 4px; font-weight: 700; }

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px;
}
.card-surface {
  background: rgba(255,255,255,.03);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px;
}
.card-red    { background: var(--red-dim);    border-color: rgba(239,68,68,.28); }
.card-amber  { background: var(--gold-dim);   border-color: rgba(245,158,11,.28); }
.card-green  { background: var(--green-dim);  border-color: rgba(34,197,94,.28); }
.card-purple { background: var(--purple-dim); border-color: rgba(167,139,250,.28); }
.card-blue   { background: var(--blue-dim);   border-color: rgba(96,165,250,.28); }

/* ── Stat Card ── */
.stat-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}
.stat-card__num  { font-size: 24px; font-weight: 700; }
.stat-card__lbl  { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ── AI Match Card ── */
.ai-card {
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(167,139,250,.08));
  border: 1.5px solid rgba(245,158,11,.25);
  border-radius: var(--radius-md);
  padding: 13px;
  margin-bottom: 9px;
}

/* ── Resource List Item ── */
.ri {
  padding: 8px 13px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
}
.ri:hover { background: rgba(255,255,255,.03); }
.ri.sel   { background: rgba(245,158,11,.07); border-left: 2.5px solid var(--gold); padding-left: 10px; }

/* ── Divider ── */
.divider {
  border: none;
  border-top: 1.5px solid var(--border);
  margin: 13px 0;
}

/* ── Error / Success Alerts ── */
.alert { font-size: 11px; padding: 9px 12px; border-radius: var(--radius-md); display: none; }
.alert.show { display: block; }
.alert-error   { color: var(--red-light);   background: var(--red-dim);   border: 1px solid rgba(239,68,68,.3); }
.alert-success { color: var(--green-light); background: var(--green-dim); border: 1px solid rgba(34,197,94,.3); line-height: 1.7; text-align: center; }

/* ── Leaflet Map Overrides ── */
.leaflet-control-attribution { display: none !important; }
.leaflet-popup-content-wrapper {
  background: #0d1527 !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-modal) !important;
}
.leaflet-popup-content { color: rgba(255,255,255,.85) !important; margin: 11px 13px !important; font-size: 12px !important; }
.leaflet-popup-tip-container { display: none; }
.leaflet-control-zoom a {
  background: #0e1628 !important;
  color: rgba(255,255,255,.75) !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  font-weight: 700;
}
.leaflet-control-zoom a:hover { background: #1a2540 !important; color: #fff !important; }