/* ═══════════════════════════════════════════════════════
   Spendlyst — UI Components
   Buttons, inputs, badges, tables, nav, etc.
   ═══════════════════════════════════════════════════════ */

/* ── Buttons ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:#fff; opacity:0; transition:opacity var(--duration-fast); }
.btn:active::after { opacity:0.15; }

.btn-primary { background:var(--accent-primary); color:var(--text-inverse); box-shadow:0 2px 8px rgba(139,92,246,0.3); }
.btn-primary:hover { background:var(--accent-hover); box-shadow:0 4px 16px rgba(139,92,246,0.4); transform:translateY(-1px); }

.btn-secondary { background:var(--bg-elevated); color:var(--text-primary); border:1px solid var(--border-default); }
.btn-secondary:hover { background:var(--bg-sunken); border-color:var(--border-strong); }

.btn-ghost { color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-elevated); color:var(--text-primary); }

.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { filter:brightness(1.1); }

.btn-sm { padding:var(--space-2) var(--space-4); font-size:var(--fs-sm); }
.btn-lg { padding:var(--space-4) var(--space-8); font-size:var(--fs-md); }
.btn-block { width:100%; }

.btn:disabled,.btn[disabled] { opacity:0.5; pointer-events:none; }
.btn-loading { pointer-events:none; color:transparent!important; }
.btn-loading::before { content:''; position:absolute; width:18px; height:18px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; }

/* ── Form inputs ─────── */
.form-group { display:flex; flex-direction:column; gap:var(--space-2); }
.form-label { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-secondary); letter-spacing:0.02em; text-transform:uppercase; }

.form-input {
  width:100%; padding:var(--space-3) var(--space-4);
  background:var(--bg-base); border:1.5px solid var(--border-default);
  border-radius:var(--radius-md); font-size:var(--fs-base);
  color:var(--text-primary); transition:border-color var(--duration-fast),box-shadow var(--duration-fast); outline:none;
}
.form-input::placeholder { color:var(--text-muted); }
.form-input:focus { border-color:var(--accent-primary); box-shadow:0 0 0 3px rgba(139,92,246,0.15); }

.form-input-icon { position:relative; }
.form-input-icon .form-input { padding-left:var(--space-10); }
.form-input-icon .icon { position:absolute; left:var(--space-3); top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:var(--fs-md); pointer-events:none; }

.form-hint { font-size:var(--fs-xs); color:var(--text-muted); }
.form-error { font-size:var(--fs-xs); color:var(--danger); font-weight:var(--fw-medium); }

.password-toggle { position:absolute; right:var(--space-3); top:50%; transform:translateY(-50%); color:var(--text-muted); cursor:pointer; padding:var(--space-1); border-radius:var(--radius-sm); transition:color var(--duration-fast); }
.password-toggle:hover { color:var(--text-primary); }

/* ── Badges ──────────── */
.badge { display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-3); font-size:var(--fs-xs); font-weight:var(--fw-semibold); border-radius:var(--radius-full); }
.badge-success { background:rgba(39,174,96,0.12); color:var(--success); }
.badge-warning { background:rgba(242,153,74,0.12); color:var(--warning); }
.badge-danger  { background:rgba(235,87,87,0.12);  color:var(--danger); }
.badge-info    { background:rgba(45,156,219,0.12);  color:var(--info); }

/* ── Avatar ──────────── */
.avatar { width:40px; height:40px; border-radius:var(--radius-full); overflow:hidden; background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:var(--fw-bold); font-size:var(--fs-base); flex-shrink:0; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-sm { width:32px; height:32px; font-size:var(--fs-sm); }
.avatar-lg { width:56px; height:56px; font-size:var(--fs-lg); }

/* ── Divider ─────────── */
.divider { border:none; border-top:1px solid var(--border-muted); margin:var(--space-6) 0; }
.divider-text { display:flex; align-items:center; gap:var(--space-4); color:var(--text-muted); font-size:var(--fs-sm); }
.divider-text::before,.divider-text::after { content:''; flex:1; height:1px; background:var(--border-muted); }

/* ── Empty state ─────── */
.empty-state { text-align:center; padding:var(--space-16) var(--space-8); }
.empty-state-icon { font-size:3rem; margin-bottom:var(--space-4); opacity:0.5; }
.empty-state-title { font-size:var(--fs-lg); font-weight:var(--fw-semibold); margin-bottom:var(--space-2); }
.empty-state-text { color:var(--text-muted); max-width:360px; margin:0 auto; }

/* ── Logo ────────────── */
.logo { display:flex; align-items:center; gap:var(--space-3); font-family:var(--ff-heading); font-weight:var(--fw-heavy); font-size:var(--fs-xl); color:var(--text-primary); }
.logo-mark { width:36px; height:36px; background:linear-gradient(135deg,var(--accent-primary) 0%,#C4B5FD 100%); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--fs-md); box-shadow:0 2px 10px rgba(139,92,246,0.35); }

/* ── OAuth buttons ────── */
.oauth-buttons { display:flex; flex-direction:column; gap:var(--space-3); }
.btn-oauth {
  background:var(--bg-surface); color:var(--text-primary);
  border:1.5px solid var(--border-default); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4); font-weight:var(--fw-medium);
  font-size:var(--fs-base); transition:all var(--duration-fast) var(--ease-out);
  text-decoration:none;
}
.btn-oauth svg { flex-shrink:0; }
.btn-oauth:hover { border-color:var(--border-strong); background:var(--bg-elevated); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-oauth:active { transform:translateY(0); }
.btn-oauth:active::after { opacity:0; }

/* ── Text helpers ────── */
.text-center { text-align:center; }
.text-right  { text-align:right; }
.text-muted  { color:var(--text-muted); }
.text-sm     { font-size:var(--fs-sm); }
.text-xs     { font-size:var(--fs-xs); }
.text-success{ color:var(--success); }
.text-danger { color:var(--danger); }
.font-mono   { font-family:var(--ff-mono); }
.font-bold   { font-weight:var(--fw-bold); }
.truncate    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.link { color:var(--accent-primary); font-weight:var(--fw-medium); transition:color var(--duration-fast); }
.link:hover { color:var(--accent-hover); text-decoration:underline; }

@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:24px; height:24px; border:3px solid var(--border-muted); border-top-color:var(--accent-primary); border-radius:50%; animation:spin 0.8s linear infinite; }
.spinner-lg { width:40px; height:40px; border-width:4px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ── Glassmorphism ───── */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-modal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-xl);
}