@import "tailwindcss";

@theme {
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
}

.nav-item { color: #94a3b8; transition: all 0.2s ease; }
.nav-item:hover { color: white; background-color: rgba(255,255,255,0.1); }
.nav-item.active { background-color: white; color: #1e293b; }

.modal-overlay { transition: opacity 0.2s ease; }
.modal-content { transition: transform 0.2s ease, opacity 0.2s ease; }
.toast { transition: transform 0.3s ease, opacity 0.3s ease; }

.search-input { background: linear-gradient(to bottom, #fff 0%, #f8f9fa 100%); border: 1px solid #d4d4d4; box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); }
.filter-btn { background: linear-gradient(to bottom, #fff 0%, #e9ecef 100%); border: 1px solid #d4d4d4; box-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.date-input { background: linear-gradient(to bottom, #fff 0%, #f8f9fa 100%); border: 1px solid #d4d4d4; box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); }

.table-header { background: linear-gradient(to bottom, #f3f3f3 0%, #e8e8e8 0%); border: 1px solid #d4d4d4; }
.table-row { background-color: #ffffff; border: 1px solid #d4d4d4; }