/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 13px var(--space-5);
  border-radius: var(--radius-md);
  border: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
  user-select: none;
}

.btn-primary {
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
  border-bottom: 4px solid var(--color-primary-700);
}
.btn-primary:hover { background: var(--color-primary-400); text-decoration: none; }
.btn-primary:active {
  border-bottom-width: 1px;
  transform: translateY(3px);
}

.btn-success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-bottom: 4px solid var(--color-success-dark);
}
.btn-success:active { border-bottom-width: 1px; transform: translateY(3px); }

.btn-ghost {
  background: transparent;
  color: var(--color-primary-600);
  border: 2px solid var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-primary-400); text-decoration: none; background: var(--color-primary-100); }

.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-clickable { cursor: pointer; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.badge-success { background: #EAFBDD; color: #2E7000; }
.badge-warning { background: #FFF6DB; color: #7A6000; }
.badge-danger  { background: #FFE7E7; color: #B91C1C; }
.badge-info    { background: var(--color-primary-100); color: var(--color-primary-600); }
.badge-purple  { background: #F4E5FF; color: #7E22CE; }

/* ---------- Inputs ---------- */
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.field input {
  width: 100%;
  padding: 14px var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color 0.15s ease;
}
.field input:focus {
  border-color: var(--color-primary-500);
  outline: none;
}

/* ---------- Avatar ---------- */
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  flex-shrink: 0;
}
.avatar-lg { width: 72px; height: 72px; font-size: 1.5rem; }

/* ---------- Progress bar ---------- */
.progress-track {
  width: 100%;
  height: 12px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger { background: var(--color-danger); }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state .emoji { font-size: 3rem; margin-bottom: var(--space-3); }

/* ---------- Sidebar item ---------- */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-primary-900);
  font-weight: 700;
  margin-bottom: var(--space-1);
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-item:hover {
  background: var(--color-primary-100);
  text-decoration: none;
}
.sidebar-item.active {
  background: var(--color-primary-600);
  color: var(--color-text-inverse);
}
.sidebar-item .icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ---------- Section heading row ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- Chip / pill nav (tabs, folders) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 8px var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}
.pill.active {
  background: var(--color-primary-600);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-600);
}

/* ---------- Stat card (dashboard) ---------- */
.stat-label {
  color: var(--color-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary-900);
  margin: 0 0 4px;
}
.stat-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ---------- Alert / inline feedback ---------- */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.alert-success { background: #EAFBDD; color: #2E7000; border: 2px solid #C6ECA0; }
.alert-error { background: #FFE7E7; color: #B91C1C; border: 2px solid #FFC2C2; }

/* ---------- Sidebar logout ---------- */
.sidebar-logout {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
}

/* ---------- Topbar ---------- */
.topbar-actions { margin-left: auto; }
.topbar-unread .badge { margin-left: 6px; }