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

@layer base {
  html {
    @apply antialiased;
  }

  body {
    @apply bg-gray-50 text-gray-900;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-amber-700 text-white hover:bg-amber-800;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
  }

  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent;
  }

  .card {
    @apply bg-white rounded-lg border border-gray-200 shadow-sm;
  }

  .card-header {
    @apply px-4 py-3 border-b border-gray-200;
  }

  .card-content {
    @apply p-4;
  }

  .table-base {
    @apply w-full border-collapse;
  }

  .table-header {
    @apply px-4 py-2 text-left bg-gray-50 border-b border-gray-200;
  }

  .table-cell {
    @apply px-4 py-2 border-b border-gray-200;
  }

  .sidebar {
    @apply flex flex-col h-full border-r border-gray-200 transition-all duration-300;
  }

  .sidebar-expanded {
    @apply w-64;
  }

  .sidebar-collapsed {
    @apply w-20;
  }

  .nav-item {
    @apply w-full p-2 text-gray-700 hover:bg-gray-100 rounded-lg flex items-center;
  }

  .dropdown {
    @apply absolute w-full bg-white border border-gray-200 rounded-lg shadow-lg mt-2;
  }

  .dropdown-item {
    @apply w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100;
  }
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* Message types */
.message {
  @apply mb-4 animate-fade-in;
}

.message-user {
  @apply bg-gray-100;
}

.message-system {
  @apply bg-blue-100;
}

.message-arlo {
  @apply bg-white;
}

/* Chart containers */
.chart-container {
  @apply w-full h-64 md:h-96;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .sidebar-expanded {
    @apply absolute z-50;
  }
}

.tooltip-button {
  position: relative;
}

.tooltip-button:hover::before {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #333;
  color: white;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  z-index: 1000;
  margin-bottom: 4px;
}

.preserve-whitespace {
  white-space: pre;
}