@import "tailwindcss";
@plugin "@tailwindcss/typography";

@layer base {
  * {
    border-color: var(--color-gray-200);
  }

  .dark * {
    border-color: var(--color-gray-700);
  }

  html {
    -webkit-text-size-adjust: 100%;
    font-family: var(--font-sans);
  }

  body {
    @apply bg-gray-50 text-gray-900 antialiased dark:bg-gray-900 dark:text-gray-100;
  }

  /* Scrollbar styles */
  ::-webkit-scrollbar {
    @apply h-2 w-2;
  }

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

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

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

@layer components {
  /* Button variants */
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center rounded-lg border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-icon {
    @apply inline-flex h-8 w-8 items-center justify-center rounded border-0 bg-transparent text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200;
  }

  /* Input styles */
  .input-base {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 transition-colors focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:disabled:bg-gray-700;
  }

  /* Card styles */
  .card {
    @apply rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800;
  }

  .card-header {
    @apply border-b border-gray-200 px-6 py-4 dark:border-gray-700;
  }

  .card-body {
    @apply px-6 py-4;
  }

  .card-footer {
    @apply border-t border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-700;
  }

  /* Email specific styles */
  .email-content {
    @apply prose prose-sm prose-gray dark:prose-invert max-w-none;
  }

  .email-content pre {
    @apply overflow-x-auto rounded-lg bg-gray-100 p-4 font-mono text-xs dark:bg-gray-800;
  }

  .email-content blockquote {
    @apply border-l-4 border-gray-300 pl-4 text-gray-600 italic dark:border-gray-600 dark:text-gray-400;
  }

  /* Status indicators */
  .status-dot {
    @apply inline-block h-2 w-2 rounded-full;
  }

  .status-dot.online {
    @apply bg-green-500;
  }

  .status-dot.offline {
    @apply bg-red-500;
  }

  .status-dot.warning {
    @apply bg-yellow-500;
  }

  /* Animation helpers */
  .animate-in {
    opacity: 0;
    animation: fadeIn 0.2s ease-out forwards;
  }

  .animate-slide-up {
    opacity: 0;
    animation: slideUp 0.3s ease-out forwards;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer utilities {
  /* Text selection */
  .select-text {
    user-select: text;
  }

  .select-none {
    user-select: none;
  }

  /* Focus visible only when not clicked */
  .focus-visible-only:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  /* Scrollable areas */
  .scrollable {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) var(--color-gray-100);
  }

  .dark .scrollable {
    scrollbar-color: var(--color-gray-600) var(--color-gray-800);
  }

  /* Email preview styles */
  .email-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Monospace for email headers */
  .mono {
    font-family: var(--font-mono);
  }
}
