/* ═══════════════════════════════════════════════════════════════════════════
   SkillBro — Unified Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f8fafc; color: #0f172a; line-height: 1.5; }
.gradient-bg { background: radial-gradient(900px 500px at 10% -10%, #dbeafe 0%, #f8fafc 52%, #f1f5f9 100%); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary { background: #4f46e5; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-primary:hover:not(:disabled) { background: #4338ca; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline { background: #fff; color: #4f46e5; border: 1px solid #4f46e5; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-outline:hover:not(:disabled) { background: #eef2ff; }
.btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost { background: transparent; color: #334155; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-ghost:hover { background: #f1f5f9; color: #0f172a; }

.btn-ai { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-ai:hover:not(:disabled) { box-shadow: 0 0 20px rgba(124,58,237,0.4); transform: translateY(-1px); }
.btn-ai:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 6px; }
.develop-idea-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.btn-glow { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); box-shadow: 0 0 0 0 rgba(79,70,229,0); transition: all 0.25s; }
.btn-glow:hover:not(:disabled) { box-shadow: 0 0 22px rgba(79,70,229,0.55); transform: translateY(-2px) scale(1.01); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
input, textarea, select { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 14px; color: #0f172a; background: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
input:focus, textarea:focus, select:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
textarea { resize: vertical; }
label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 4px; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header h2 { margin: 0; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: none; background: none; text-align: left; font-size: 13px; color: #334155; cursor: pointer; border-radius: 8px; transition: all 0.15s; }
.sidebar-item:hover { background: #f1f5f9; color: #0f172a; }
.sidebar-item.active { background: #eef2ff; color: #4f46e5; font-weight: 600; }
.sidebar-item-icon { font-size: 16px; }

/* ── Ideas (row layout) ───────────────────────────────────────────────────── */
#ideasList { display: flex; flex-direction: column; gap: 8px; }
.idea-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; transition: border-color 0.2s; }
.idea-row:hover { border-color: #4f46e5; }
.idea-row-num { font-size: 18px; font-weight: 800; color: #64748b; min-width: 28px; padding-top: 2px; }
.idea-row-body { flex: 1; min-width: 0; }
.idea-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.idea-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.idea-desc { font-size: 12px; color: #334155; margin: 0; }
.idea-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }

/* ── Calendar ─────────────────────────────────────────────────────────────── */
.calendar-item { cursor: pointer; transition: border-color 0.2s; }
.calendar-item:hover { border-color: #4f46e5; }
.calendar-date { font-size: 11px; font-weight: 700; color: #4f46e5; margin-bottom: 4px; }
.calendar-title { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.calendar-actions { display: flex; gap: 6px; }

/* ── Develop ───────────────────────────────────────────────────────────────── */
.develop-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.develop-col { min-width: 0; }

/* ── Post Editor ──────────────────────────────────────────────────────────── */
.post-variant { padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-bottom: 8px; }
.post-variant:hover { border-color: #4f46e5; }
.post-variant.selected { border-color: #10b981; background: #f0fdf4; }

/* ── Credits ──────────────────────────────────────────────────────────────── */
.credit-balance { font-size: 32px; font-weight: 800; color: #4f46e5; }

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: #475569; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.spinner { border: 3px solid #e2e8f0; border-top-color: #4f46e5; border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-red-600 { color: #dc2626; }

/* ── Chip buttons (onboarding) ────────────────────────────────────────────── */
.chip-btn { padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.chip-btn:hover { border-color: #4f46e5; }
.chip-btn.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .develop-columns { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}