@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --primary-blue: #3182CE;
    --primary-blue-hover: #2563EB;
    --primary-blue-active: #1D4ED8;
    --primary-blue-dark: #1E40AF;
    --bg-main: #F8FAFC;
    --bg-white: #FFFFFF;
    --bg-gray: #F0F4F8;
    --bg-accent: #E6F2FF;
    --text-primary: #1A365D;
    --text-secondary: #2D3748;
    --text-tertiary: #4A5568;
    --text-quaternary: #718096;
    --text-placeholder: #A0AEC0;
    --border-default: #E2E8F0;
    --border-input: #CBD5E0;
    --success: #059669;
    --warning: #D97706;
    --error: #DC2626;
    --info: #2563EB;
  }

  .dark {
    --primary-blue: #232D53;
    --primary-blue-hover: #232D53;
    --primary-blue-active: #232D53;
    --bg-main: #000000;
    --bg-white: #1A1F3A;
    --bg-gray: #232D53;
    --bg-accent: #232D53;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-quaternary: rgba(255, 255, 255, 0.5);
    --text-placeholder: rgba(255, 255, 255, 0.4);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-input: rgba(255, 255, 255, 0.2);
    --success: #4CAF50;
    --warning: #FFC107;
    --error: #FF4444;
    --info: #2196F3;
  }

  * {
    @apply transition-colors duration-default ease-default;
  }

  body {
    @apply bg-bg-main text-text-secondary font-sans;
  }

  .dark body {
    @apply bg-dark-bg text-dark-text-primary;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-blue text-white rounded-button h-12 px-8 font-poppins font-semibold text-nav
           hover:bg-primary-blue-hover active:bg-primary-blue-active shadow-sm
           transition-all duration-default ease-default
           dark:bg-dark-accent dark:text-dark-bg dark:hover:bg-dark-accent-hover dark:hover:text-white;
  }

  .btn-secondary {
    @apply bg-transparent text-text-primary border border-border-default rounded-button h-12 px-8
           font-poppins font-semibold text-nav hover:bg-bg-main hover:border-border-input
           transition-all duration-default ease-default
           dark:text-white dark:border-dark-primary dark:hover:bg-dark-primary;
  }

  .input-field {
    @apply bg-white border border-border-input rounded-input px-4 py-3 text-text-secondary
           placeholder:text-text-placeholder focus:border-primary-blue focus:shadow-focus
           focus:outline-none transition-all duration-fast
           dark:bg-dark-primary dark:border-transparent dark:text-white 
           dark:placeholder:text-dark-text-tertiary dark:focus:bg-dark-bg-focus;
  }

  .card {
    @apply bg-white border border-border-default rounded-card p-card shadow-sm
           hover:border-primary-blue hover:bg-bg-main hover:shadow-md hover:-translate-y-0.5
           transition-all duration-default ease-default cursor-pointer
           dark:bg-dark-bg-secondary dark:border-transparent dark:hover:border-dark-accent
           dark:hover:bg-dark-primary;
  }

  .form-card {
    @apply bg-white border border-gray-300 rounded-lg p-6 shadow-sm
           dark:bg-gray-800 dark:border-gray-600;
  }

  .badge {
    @apply px-3 py-1 rounded-badge text-help font-semibold uppercase tracking-wide;
  }

  .badge-success {
    @apply bg-success-bg text-success dark:bg-success dark:text-white;
  }

  .badge-warning {
    @apply bg-warning-bg text-warning dark:bg-warning dark:text-dark-bg;
  }

  .badge-error {
    @apply bg-error-bg text-error dark:bg-error dark:text-white;
  }

  .badge-info {
    @apply bg-info-bg text-info dark:bg-info dark:text-white;
  }

  .sidebar-item {
    @apply flex items-center px-4 py-3 rounded-input text-nav font-medium
           hover:bg-bg-main transition-all duration-fast cursor-pointer
           dark:hover:bg-dark-primary/50;
  }

  .sidebar-item-active {
    @apply bg-bg-accent text-primary-blue-dark border-l-4 border-primary-blue
           dark:bg-dark-primary dark:text-white dark:border-dark-accent;
  }

  .dialog {
    @apply bg-white border border-border-default rounded-input shadow-xl
           dark:bg-dark-bg dark:border-dark-border;
  }

  .dialog-header {
    @apply bg-bg-gray h-10 flex items-center justify-between px-4 rounded-t-input
           dark:bg-dark-primary;
  }

  .table-header {
    @apply bg-bg-gray text-text-primary font-semibold border-b border-border-default
           dark:bg-dark-primary dark:text-white dark:border-dark-border;
  }

  .table-row {
    @apply bg-white hover:bg-bg-main border-b border-border-default transition-colors duration-fast
           dark:bg-transparent dark:hover:bg-dark-bg-secondary dark:border-dark-border;
  }

  .scrollbar {
    @apply scrollbar-thin scrollbar-track-divider scrollbar-thumb-border-input
           hover:scrollbar-thumb-text-placeholder
           dark:scrollbar-track-dark-bg-secondary dark:scrollbar-thumb-dark-accent
           dark:hover:scrollbar-thumb-dark-accent-hover;
  }
}

@layer utilities {
  .text-primary {
    @apply text-text-primary dark:text-white;
  }

  .text-secondary {
    @apply text-text-secondary dark:text-dark-text-secondary;
  }

  .text-tertiary {
    @apply text-text-tertiary dark:text-dark-text-tertiary;
  }

  .bg-primary {
    @apply bg-bg-main dark:bg-dark-bg;
  }

  .bg-secondary {
    @apply bg-white dark:bg-dark-bg-secondary;
  }

  .bg-tertiary {
    @apply bg-bg-gray dark:bg-dark-primary;
  }

  .border-primary {
    @apply border-border-default dark:border-dark-border;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .-webkit-app-region-drag {
    -webkit-app-region: drag;
  }

  .-webkit-app-region-no-drag {
    -webkit-app-region: no-drag;
  }
}
