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

@layer base {
  * {
    @apply border-gray-200 dark:border-gray-700;
  }
  
  body {
    @apply bg-gray-50 dark:bg-dark-bg text-gray-900 dark:text-dark-text;
  }
}

@layer components {
  /* Button variants */
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm;
  }
  
  .btn-secondary {
    @apply bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-400;
  }
  
  .btn-outline {
    @apply border border-gray-300 text-gray-800 bg-transparent hover:bg-gray-100 focus:ring-gray-500 dark:border-dark-border dark:text-dark-text dark:hover:bg-dark-surfaceHover;
  }
  
  .btn-neutral {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-dark-text dark:hover:bg-gray-600;
  }
  
  .btn-ghost {
    @apply bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-dark-textSecondary dark:hover:bg-dark-surfaceHover;
  }
  
  .btn-danger {
    @apply bg-error-600 text-white hover:bg-error-700 focus:ring-error-500;
  }
  
  /* Alias commonly used in pages */
  .btn-error {
    @apply bg-error-600 text-white hover:bg-error-700 focus:ring-error-500;
  }
  
  .btn-error-outline {
    @apply border border-error-500 text-error-700 bg-transparent hover:bg-error-50 focus:ring-error-500 dark:text-error-400 dark:border-error-600 dark:hover:bg-error-900/20;
  }
  
  /* Input styles */
  .input {
    @apply w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-dark-border dark:bg-dark-surface dark:text-dark-text dark:placeholder-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400;
  }
  
  /* Card styles */
  .card {
    @apply rounded-xl bg-white p-6 shadow-soft dark:bg-dark-surface dark:shadow-none dark:border dark:border-dark-border;
  }
  
  .card-header {
    @apply mb-4 flex items-center justify-between;
  }
  
  .card-title {
    @apply text-lg font-semibold text-gray-900 dark:text-dark-text;
  }
  
  /* Table styles */
  .table {
    @apply w-full border-collapse;
  }
  
  .table th {
    @apply border-b border-gray-200 bg-gray-50 px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:border-dark-border dark:bg-dark-surface dark:text-dark-textSecondary;
  }
  
  .table td {
    @apply border-b border-gray-100 px-4 py-4 text-sm text-gray-900 dark:border-dark-border dark:text-dark-text;
  }
  
  .table tbody tr {
    @apply hover:bg-gray-50 dark:hover:bg-dark-surfaceHover transition-colors duration-150;
  }
  
  /* Badge styles */
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
  }
  
  .badge-primary {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200;
  }
  
  .badge-success {
    @apply bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200;
  }
  
  .badge-warning {
    @apply bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-200;
  }
  
  .badge-error {
    @apply bg-error-100 text-error-800 dark:bg-error-900 dark:text-error-200;
  }
  
  .badge-gray {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200;
  }
  
  /* Loading spinner */
  .spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600 h-6 w-6;
  }
  
  /* Sidebar styles */
  .sidebar {
    @apply fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full transform bg-white shadow-strong transition-transform duration-300 dark:bg-dark-surface dark:border-r dark:border-dark-border lg:translate-x-0;
  }
  
  .sidebar-item {
    @apply flex items-center rounded-lg px-3 py-2 text-sm font-medium text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-gray-900 dark:text-dark-textSecondary dark:hover:bg-dark-surfaceHover dark:hover:text-dark-text;
  }
  
  .sidebar-item.active {
    @apply bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400;
  }
  
  /* Topbar styles */
  .topbar {
    @apply fixed top-0 z-30 h-16 w-full bg-white/80 backdrop-blur-sm border-b border-gray-200 dark:bg-dark-surface/80 dark:border-dark-border;
  }
  
  /* Main content area */
  .main-content {
    @apply lg:ml-64 min-h-screen bg-gray-50 dark:bg-dark-bg;
  }

  /* Hide scrollbars but allow scroll (sidebar/menu) */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  
  /* Page header */
  .page-header {
    @apply mb-6 flex items-center justify-between pt-12 lg:pt-0;
  }
  
  .page-title {
    @apply text-2xl font-bold text-gray-900 dark:text-dark-text;
  }
  
  /* Search input */
  .search-input {
    @apply w-full max-w-md rounded-lg border border-gray-300 bg-white pl-10 pr-4 py-2 text-sm placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-dark-border dark:bg-dark-surface dark:text-dark-text dark:placeholder-gray-400;
  }
  
  /* Stats cards */
  .stats-card {
    @apply rounded-xl bg-white p-6 shadow-soft dark:bg-dark-surface dark:border dark:border-dark-border;
  }
  
  .stats-value {
    @apply text-3xl font-bold text-gray-900 dark:text-dark-text;
  }
  
  .stats-label {
    @apply text-sm font-medium text-gray-500 dark:text-dark-textSecondary;
  }
  
  .stats-change {
    @apply text-sm font-medium;
  }
  
  .stats-change.positive {
    @apply text-success-600 dark:text-success-400;
  }
  
  .stats-change.negative {
    @apply text-error-600 dark:text-error-400;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent;
  }
} 
