@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --brand: #0ea5e9;
}

body {
  background-color: #0d1117;
  color: #e2e8f0;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbars */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #334155; }

/* Light Scrollbar for pre tags */
.custom-scrollbar-light::-webkit-scrollbar { width: 3px; }
.custom-scrollbar-light::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
.custom-scrollbar-light::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }

/* Components */
.nav-item {
  @apply w-full flex items-center justify-between px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200 border border-transparent;
  @apply text-slate-500 hover:bg-gray-800 hover:text-slate-300;
}

.nav-item.active {
  @apply bg-brand-900/20 text-brand-400 border-brand-900/50 shadow-lg shadow-brand-900/5;
}

.nav-item .icon {
  @apply opacity-50 grayscale transition-all;
}

.nav-item.active .icon {
  @apply opacity-100 grayscale-0;
}

.badge {
  @apply text-[9px] px-2 py-0.5 rounded-full font-mono bg-slate-800 text-slate-600;
}

.nav-item.active .badge {
  @apply bg-brand-900 text-brand-300;
}

.status-pill {
  @apply flex justify-between items-center px-4 py-2 bg-gray-900/40 border border-slate-800 rounded-lg text-[9px] font-black uppercase tracking-widest;
}

.workspace-item {
  @apply p-4 bg-gray-900/20 border border-slate-800 rounded-2xl cursor-pointer transition-all hover:bg-gray-800/40 hover:border-slate-700;
}

.workspace-item.active {
  @apply bg-gray-800/60 border-brand-500/50 shadow-2xl shadow-brand-500/5 ring-1 ring-brand-500/20;
}

/* Log Entry */
.log-entry {
  @apply border-b border-slate-900/30 pb-2 mb-1;
}

.log-time {
  @apply text-[9px] text-slate-700 font-mono w-[65px] shrink-0;
}

.log-content {
  @apply overflow-hidden break-words flex-1 leading-relaxed;
}

.field-label {
  @apply block text-[10px] font-black text-slate-600 uppercase tracking-[0.3em] mb-2;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Twitter */
.twitter-tweet {
  margin: 0 !important;
  width: 100% !important;
  min-height: 400px;
}

.twitter-tweet-rendered {
  @apply !max-w-full !m-0;
}