/* ============================================================
   components.css — Kenki Component Library
   Requires: design-tokens.css loaded first
   ============================================================ */

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background var(--duration-base), color var(--duration-base);
}
a { color: var(--accent-primary); text-decoration: none; }
img, svg { display: block; }

/* ── Glassmorphism Card ───────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base);
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card), var(--shadow-glow-teal);
}

/* ── Stat Card ────────────────────────────────────────────── */
.stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: all var(--duration-base) var(--ease-out);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-teal); }
.stat-card__label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--font-semibold); }
.stat-card__value { font-size: var(--text-h2); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1.1; }
.stat-card__sub { font-size: var(--text-sm); color: var(--text-secondary); }
.stat-card__icon { font-size: 1.75rem; }

/* ── Chart Card ───────────────────────────────────────────── */
.chart-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.chart-card__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: .06em; }
.chart-card__canvas { width: 100%; }

/* ── Form Inputs ──────────────────────────────────────────── */
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(0,212,170,.15);
  background: rgba(0,212,170,.04);
}
.form-input.error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary); margin-bottom: var(--space-2); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; border: none; transition: all var(--duration-fast) var(--ease-out); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent-primary); color: var(--text-inverse); }
.btn-primary:hover:not(:disabled) { background: var(--teal-300); box-shadow: var(--shadow-glow-teal); transform: translateY(-1px); }
.btn-secondary { background: transparent; border: 1px solid var(--border-accent); color: var(--accent-primary); }
.btn-secondary:hover:not(:disabled) { background: rgba(0,212,170,.08); box-shadow: var(--shadow-glow-teal); }
.btn-ghost { background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); border-color: rgba(255,255,255,.2); color: var(--text-primary); }
.btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: rgba(248,113,113,.1); box-shadow: var(--shadow-glow-red); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); }

/* ── Badge / Pill ─────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-caption); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: .06em; }
.badge-teal { background: rgba(0,212,170,.15); color: var(--teal-300); border: 1px solid rgba(0,212,170,.3); }
.badge-cyan { background: rgba(79,172,254,.15); color: var(--cyan-300); border: 1px solid rgba(79,172,254,.3); }
.badge-red { background: rgba(248,113,113,.15); color: var(--red-400); border: 1px solid rgba(248,113,113,.3); }
.badge-amber { background: rgba(251,191,36,.15); color: var(--amber-400); border: 1px solid rgba(251,191,36,.3); }
.badge-green { background: rgba(52,211,153,.15); color: var(--green-400); border: 1px solid rgba(52,211,153,.3); }
.pill { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); }

/* ── Streak Badge ─────────────────────────────────────────── */
.streak-badge { display: inline-flex; align-items: center; gap: var(--space-1); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25); border-radius: var(--radius-full); padding: 3px var(--space-3); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--amber-400); }
.streak-badge--active { animation: glowPulse 3s infinite; }

/* ── Progress Ring (D3 / SVG) ─────────────────────────────── */
.progress-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.progress-ring__svg { transform: rotate(-90deg); }
.progress-ring__track { fill: none; stroke: rgba(255,255,255,.06); }
.progress-ring__fill { fill: none; stroke: var(--accent-primary); stroke-linecap: round; transition: stroke-dashoffset var(--duration-slower) var(--ease-out); }
.progress-ring__label { position: absolute; text-align: center; }
.progress-ring__value { font-size: var(--text-h3); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1; }
.progress-ring__unit { font-size: var(--text-caption); color: var(--text-muted); }

/* ── Loading Skeleton ─────────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
.skeleton-text { height: 14px; margin-bottom: var(--space-2); border-radius: var(--radius-xs); }
.skeleton-text.w-3\/4 { width: 75%; }
.skeleton-text.w-1\/2 { width: 50%; }
.skeleton-block { height: 48px; margin-bottom: var(--space-2); }
.skeleton-card { height: 120px; border-radius: var(--radius-md); }

/* ── Empty State ──────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); text-align: center; }
.empty-state__icon { font-size: 3rem; opacity: .4; }
.empty-state__title { font-size: var(--text-h4); font-weight: var(--font-semibold); color: var(--text-primary); }
.empty-state__body { font-size: var(--text-sm); color: var(--text-muted); max-width: 280px; }

/* ── Toast ────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; }
.toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-card); animation: slideUp var(--duration-base) var(--ease-out); font-size: var(--text-sm); }
.toast--success { background: rgba(52,211,153,.15); border: 1px solid rgba(52,211,153,.3); color: var(--green-400); }
.toast--error { background: rgba(248,113,113,.15); border: 1px solid rgba(248,113,113,.3); color: var(--red-400); }
.toast--info { background: rgba(79,172,254,.15); border: 1px solid rgba(79,172,254,.3); color: var(--cyan-300); }
.toast--warning { background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.3); color: var(--amber-400); }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(5,8,16,.75); backdrop-filter: blur(4px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); animation: fadeIn var(--duration-base); }
.modal-content { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-8); max-width: 480px; width: 100%; box-shadow: var(--shadow-card); animation: slideUp var(--duration-base) var(--ease-out); }
.modal-title { font-size: var(--text-h3); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.modal-body { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.modal-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* ── Bottom Tab Bar (mobile) ──────────────────────────────── */
.bottom-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-dropdown); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-border); display: none; }
@media (max-width: 768px) { .bottom-tab-bar { display: flex; } }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) var(--space-1); color: var(--text-muted); font-size: var(--text-caption); cursor: pointer; transition: color var(--duration-fast); }
.tab-item.active, .tab-item:hover { color: var(--accent-primary); }
.tab-item__icon { font-size: 1.25rem; }

/* ── Offline Banner ───────────────────────────────────────── */
.offline-banner { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: var(--purple-400, #7c3aed); color: #fff; text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium); }

/* ── Utilities ────────────────────────────────────────────── */
.animate-fade-in   { animation: fadeIn   var(--duration-base) var(--ease-out) both; }
.animate-slide-up  { animation: slideUp  var(--duration-base) var(--ease-out) both; }
.animate-heartbeat { animation: heartbeat 1.2s infinite; }
.animate-glow      { animation: glowPulse 3s infinite; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ── Theme Transition ─────────────────────────────────────── */
*, *::before, *::after { transition: background-color var(--duration-base), border-color var(--duration-base), color var(--duration-base); }