@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  /* Custom Breakpoints */
  --breakpoint-*: initial;
  --breakpoint-xs: 320px;
  --breakpoint-sm: 360px;
  --breakpoint-md: 640px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1024px;
  --breakpoint-2xl: 1280px;
  --breakpoint-3xl: 1536px;

  /* Theme Colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-destructive: var(--destructive);
  --color-primary-light: var(--primary-light);
  --color-secondary: var(--secondary);
  --color-border: var(--border);
}

/* ============================================
   BASE LAYER
============================================ */

@layer base {
  :root {
    /* --background: #f2faf9; */
    --background: #f5f8f7;
    --foreground: #3f4064;
    --primary: #068b80;
    --primary-light: #e6f4f2;
    --secondary: #0ea47a;
    --destructive: #fb2c36;
    --card: oklch(1 0 0);
    --border: oklch(0.922 0 0);
    --input: #d1d5dc;
  }

  .dark {
    /* --background: #121212; */
    --background: #101828;
    --foreground: #f1f5f9;
    --primary: #10b981;
    --primary-light: #065f46;
    --primary-foreground: #ffffff;
    --secondary: #14b8a6;
    --secondary-foreground: #ffffff;
    --destructive: #ef4444;
    --destructive-foreground: #fef2f2;
    --card: #1e293b;
    --border: #334155;
    --input: #334155;
  }
  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }
  html,
  body {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    direction: rtl;
    min-width: 320px;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: "IRANSans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  input:focus {
    outline: none;
  }

  a,
  button {
    cursor: pointer;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--foreground) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--card) inset !important;
    box-shadow: 0 0 0px 1000px var(--card) inset !important;
  }

  /* Firefox scrollbar */
  * {
    scrollbar-color: #d1d5db transparent;
  }

  .dark * {
    scrollbar-color: #4b5563 transparent;
  }

  /* Font Faces */
  @font-face {
    font-family: "IRANSans";
    src: url("/fonts/IRANSansWeb(FaNum)_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "IRANSans";
    src: url("/fonts/IRANSansWeb(FaNum)_Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "IRANSans";
    src: url("/fonts/IRANSansWeb(FaNum).ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "IRANSans";
    src: url("/fonts/IRANSansWeb(FaNum)_Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "IRANSans";
    src: url("/fonts/IRANSansWeb(FaNum)_UltraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
}

/* ============================================
   COMPONENTS LAYER
============================================ */

@layer components {
  .btn-primary {
    @apply h-12 bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/80 text-white text-sm sm:text-base font-medium rounded-lg shadow-md hover:shadow-lg disabled:opacity-70 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply h-12 bg-background border-2 border-primary/30 text-primary text-base font-medium rounded-lg shadow-md dark:bg-gray-500 dark:border-0 dark:text-white;
  }

  .btn-cancel {
    @apply h-12 bg-destructive hover:bg-destructive/80 dark:bg-destructive dark:hover:bg-destructive/70 text-white text-sm sm:text-base font-medium rounded-lg shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .backdrop {
    @apply bg-black/70  fixed inset-0 z-50 flex items-end;
  }
  /* Input Styles */
  .input-primary {
    @apply w-full bg-background border-2 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-foreground text-base text-right rounded-lg focus:outline-none;
  }
  .card {
    @apply bg-white dark:bg-gray-800 dark:border-white/5 shadow-2xl shadow-gray-300 dark:shadow-black/20 rounded-3xl p-5 border border-gray-100/80 backdrop-blur-sm;
  }
  .cargo-card {
    @apply bg-background 
    backdrop-blur-md 
    rounded-xl 
    border
    border-gray-200 
    shadow-[0_6px_16px_rgba(0,0,0,0.12),0_-2px_6px_rgba(255,255,255,0.6)]
    transition-all 
    duration-300
    dark:bg-gray-800/90 
    dark:backdrop-blur-2xl 
    dark:border-white/10 
    dark:shadow-[0_8px_24px_rgba(16,185,129,0.2),0_-2px_8px_rgba(255,255,255,0.05)];
  }
  .btns-container {
    @apply fixed bottom-0 left-0 right-0 bg-background px-4 py-3 flex gap-4 justify-center z-40 border-t  border-gray-200  dark:border-white/10 dark:bg-background;
    box-shadow:
      0 0 #0000,
      0 0 #0000,
      0 -1px 1px #00000024,
      0 -2px 2px #0000000d;
  }
}

/* ============================================
   UTILITIES LAYER
============================================ */

@layer utilities {
  .primary-light {
    @apply bg-linear-to-br from-primary/10 to-secondary/10;
  }

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

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

/* ============================================
   TRANSITIONS
============================================ */

/* .fade-enter-active,
.fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
} */

.slide-up-enter-active,
.slide-up-leave-active {
  transition: opacity 0.6s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
}

.slide-up-enter-active .backdrop,
.slide-up-leave-active .backdrop {
  transition: opacity 0.2s ease;
}

.slide-up-enter-from .backdrop,
.slide-up-leave-to .backdrop {
  opacity: 0;
}

.slide-up-enter-active .modal,
.slide-up-leave-active .modal {
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
}

.slide-up-enter-active .modal {
  transition-delay: 0.15s;
}

.slide-up-enter-from .modal,
.slide-up-leave-to .modal {
  transform: translateY(100%);
  opacity: 0;
}

.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease;
}

.dropdown-enter-from {
  opacity: 0;
  transform: translateY(-8px);
}

.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-4px);
}

/* ============================================
   SCROLLBAR (Webkit)
============================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* من فقط ساختار و ترتیب لایه‌ها رو طبق قرارداد استاندارد Tailwind v4 مرتب کردم و هیچ محتوایی رو تغییر ندادم.

ترتیب استاندارد در Tailwind:

@import

@custom-variant

@theme

@layer base

@layer components

@layer utilities

استایل‌های global خارج از layer (در صورت نیاز)

@font-face داخل @layer base */