@import "aos/dist/aos.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom base styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  /* Scroll offset for fixed navbar */
  section[id] {
    scroll-margin-top: 5rem;
  }

  body {
    @apply text-gray-900 bg-gray-50 dark:text-gray-100 dark:bg-gray-950;
  }
  html,
  body {
    cursor: url("/cursors/custuomCursor.cur"), auto;
  }

  button,
  a {
    cursor: url("/cursors/custompointer.cur"), pointer;
  }

  /* Toast notification variables for dark mode support */
  :root {
    --toast-bg: #ffffff;
    --toast-color: #333333;
    --toast-border: #e5e7eb;
  }

  .dark {
    --toast-bg: #1f2937;
    --toast-color: #f9fafb;
    --toast-border: #374151;
  }

  body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* Dark mode select dropdown styling - more specific rules */
  select {
    @apply bg-white text-gray-900;
  }

  .dark select {
    @apply bg-gray-700 text-gray-100;
  }

  select option {
    @apply bg-white text-gray-900;
  }

  .dark select option {
    @apply bg-gray-700 text-gray-100;
  }

  /* Force dark mode on select elements */
  .dark select,
  .dark select:focus,
  .dark select:hover {
    background-color: rgb(55 65 81) !important;
    color: rgb(243 244 246) !important;
  }

  .dark select option {
    background-color: rgb(55 65 81) !important;
    color: rgb(243 244 246) !important;
  }
}

/* Custom component styles for CareSync */
@layer components {
  /* Color System Tokens */
  .text-default {
    @apply text-gray-900 dark:text-gray-100;
  }
  .text-muted {
    @apply text-gray-600 dark:text-gray-400;
  }
  .text-primary {
    @apply text-primary-600 dark:text-primary-400;
  }
  .text-medical {
    @apply text-medical-600 dark:text-medical-400;
  }

  /* Background System */
  .bg-surface {
    @apply bg-white dark:bg-gray-900;
  }
  .bg-surface-hover {
    @apply hover:bg-gray-50 dark:hover:bg-gray-800;
  }
  .bg-subtle {
    @apply bg-gray-50 dark:bg-gray-900;
  }

  /* Border System */
  .border-subtle {
    @apply border-gray-200 dark:border-gray-800;
  }
  .border-primary {
    @apply border-primary-500 dark:border-primary-400;
  }

  /* Form System */
  .input-base {
    @apply w-full px-4 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg 
    text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
    focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 
    dark:focus:ring-primary-400 dark:focus:border-primary-400
    disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed;
  }

  .input-error {
    @apply border-red-500 dark:border-red-400 focus:ring-red-500 focus:border-red-500 
    dark:focus:ring-red-400 dark:focus:border-red-400;
  }

  .input-success {
    @apply border-medical-500 dark:border-medical-400 focus:ring-medical-500 focus:border-medical-500
    dark:focus:ring-medical-400 dark:focus:border-medical-400;
  }

  .label-base {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
  }

  .error-text {
    @apply mt-1 text-sm text-red-600 dark:text-red-400;
  }

  .helper-text {
    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
  }

  /* Status Colors */
  .status-success {
    @apply bg-medical-100 text-medical-800 dark:bg-medical-900/30 dark:text-medical-300;
  }
  .status-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
  }
  .status-error {
    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
  }
  .status-info {
    @apply bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300;
  }

  /* Button System */
  .btn-primary {
    @apply px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors dark:focus:ring-offset-gray-900;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-gray-200 text-gray-900 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900;
  }

  .card {
    @apply bg-surface p-6 rounded-lg shadow-sm border border-subtle;
  }

  .input-field {
    @apply input-base;
  }

  /* Form Fields */
  .form-group {
    @apply mb-4;
  }

  .form-label {
    @apply label-base;
  }

  .form-helper {
    @apply helper-text;
  }

  .form-error {
    @apply error-text;
  }

  /* --- Color System Tokens (Issue #71) ---------------------------------- */
  /* Keep existing visual palette; provide single-source utility classes
     to replace scattered gradient/color repetitions without altering hues. */
  .gradient-accent {
    @apply bg-gradient-to-r from-emerald-500 to-teal-600 text-white hover:from-emerald-600 hover:to-teal-700;
  }
  .gradient-accent-alt {
    @apply bg-gradient-to-r from-green-600 to-emerald-600 text-white hover:from-green-700 hover:to-emerald-700;
  }
  .btn-accent-gradient {
    @apply gradient-accent px-4 py-2 rounded-lg font-semibold transition-all duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500;
  }
  .btn-accent-gradient-alt {
    @apply gradient-accent-alt px-6 py-3 rounded-xl font-medium transition-all duration-200 shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-600;
  }
  /* ---------------------------------------------------------------------- */

  /* Healthcare-specific styles */
  .status-normal {
    @apply bg-green-100 text-green-800 px-2 py-1 text-xs font-medium rounded-full dark:bg-green-900/30 dark:text-green-300;
  }

  .status-warning {
    @apply bg-yellow-100 text-yellow-800 px-2 py-1 text-xs font-medium rounded-full dark:bg-yellow-900/30 dark:text-yellow-300;
  }

  .status-critical {
    @apply bg-red-100 text-red-800 px-2 py-1 text-xs font-medium rounded-full dark:bg-red-900/30 dark:text-red-300;
  }

  .prescription-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow dark:bg-gray-800 dark:border-gray-700;
  }

  .medicine-tag {
    @apply inline-block bg-medical-50 text-medical-700 px-2 py-1 rounded-md text-sm mr-2 mb-1 dark:bg-medical-900/20 dark:text-medical-200;
  }
}

/* Custom utilities */
@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }

  .spinner {
    @apply inline-block w-4 h-4 border-2 border-current border-r-transparent rounded-full animate-spin;
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) rgb(243 244 246);
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-900;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full dark:bg-gray-700;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-600;
  }
}

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

/* Print styles for prescriptions */
@media print {
  .no-print {
    display: none !important;
  }

  .prescription-card {
    @apply shadow-none border-2 border-gray-300;
    break-inside: avoid;
  }
}
