@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Noto+Kufi+Arabic:wght@300;400;500;600;700&display=swap');
@import '../assets/design-tokens.css';

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

/* ===== Base Styles ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
  direction: rtl;
  text-align: right;
}

/* RTL Support */
[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

/* ===== Component Classes ===== */
@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
    @apply shadow-md hover:shadow-lg active:scale-95;
  }

  .btn-secondary {
    @apply bg-neutral-200 text-neutral-800 hover:bg-neutral-300 focus:ring-neutral-400;
    @apply dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600;
  }

  .btn-accent {
    @apply bg-accent-600 text-white hover:bg-accent-700 focus:ring-accent-500;
    @apply shadow-md hover:shadow-lg active:scale-95;
  }

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }

  .btn-ghost {
    @apply bg-transparent text-neutral-700 hover:bg-neutral-100 focus:ring-neutral-400;
    @apply dark:text-neutral-300 dark:hover:bg-neutral-800;
  }

  .btn-sm {
    @apply px-4 py-2 text-sm;
  }

  .btn-lg {
    @apply px-8 py-4 text-lg;
  }

  /* Cards */
  .card {
    @apply bg-white dark:bg-neutral-800 rounded-xl shadow-md border border-neutral-200 dark:border-neutral-700;
    @apply transition-all duration-200;
  }

  .card-hover {
    @apply hover:shadow-lg hover:-translate-y-1;
  }

  .card-glass {
    @apply glass-effect shadow-xl;
  }

  /* Form Inputs */
  .input {
    @apply w-full px-4 py-3 rounded-lg border border-neutral-300 dark:border-neutral-600;
    @apply bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
    @apply transition-all duration-200;
  }

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

  .label {
    @apply block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2;
  }

  .select {
    @apply input appearance-none cursor-pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 1.5rem;
    padding-left: 2.5rem;
  }

  [dir="ltr"] .select {
    background-position: right 0.75rem center;
    padding-left: 1rem;
    padding-right: 2.5rem;
  }

  .checkbox, .radio {
    @apply w-5 h-5 text-primary-600 border-neutral-300 dark:border-neutral-600 rounded;
    @apply focus:ring-2 focus:ring-primary-500 cursor-pointer;
  }

  .radio {
    @apply rounded-full;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full 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-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
  }

  .badge-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
  }

  .badge-danger {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
  }

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

  .status-online {
    @apply bg-green-500;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
  }

  .status-offline {
    @apply bg-neutral-400;
  }

  .status-busy {
    @apply bg-red-500;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  }

  .status-recording {
    @apply bg-red-600 animate-pulse;
  }

  /* Loading Spinner */
  .spinner {
    @apply inline-block w-6 h-6 border-4 border-neutral-200 border-t-primary-600 rounded-full animate-spin;
  }

  /* Tooltip */
  .tooltip {
    @apply absolute z-50 px-3 py-2 text-sm font-medium text-white bg-neutral-900 rounded-lg shadow-lg;
    @apply opacity-0 invisible transition-all duration-200;
  }

  .tooltip-top {
    @apply bottom-full mb-2 left-1/2 -translate-x-1/2;
  }

  /* Divider */
  .divider {
    @apply border-t border-neutral-200 dark:border-neutral-700;
  }

  /* Video Container */
  .video-container {
    @apply relative w-full h-full bg-neutral-900 rounded-lg overflow-hidden;
  }

  .video-overlay {
    @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-50;
    @apply opacity-0 hover:opacity-100 transition-opacity duration-200;
  }
}

/* ===== Utility Classes ===== */
@layer utilities {
  .text-gradient-primary {
    @apply bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent;
  }

  .text-gradient-accent {
    @apply bg-gradient-to-r from-accent-600 to-accent-800 bg-clip-text text-transparent;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-400) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-400);
    border-radius: 20px;
  }
}

/* ===== Animations ===== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  @apply bg-neutral-200 dark:bg-neutral-700 rounded animate-pulse;
}

.loading-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-neutral-200) 25%,
    var(--color-neutral-300) 50%,
    var(--color-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}