/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Cairo — Arabic + Latin */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 221 83% 53%;
    --radius: 0.5rem;
    --sidebar: 222 47% 11%;
    --sidebar-foreground: 215 20% 75%;
    --sidebar-border: 222 40% 18%;
    --sidebar-accent: 222 40% 18%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 68px;
    --topbar-height: 60px;
  }
}

@layer base {
  * { @apply border-border; }

  body {
    @apply bg-background text-foreground font-sans;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { @apply bg-border rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-muted-foreground/30; }
}

@layer components {
  /**
   * Native date/time inputs — consistent look with the rest of the UI (see Input).
   * WebKit: calendar icon; Firefox/Safari: best-effort.
   */
  .crm-date-input {
    @apply text-foreground;
    font-variant-numeric: tabular-nums;
    color-scheme: light;
  }
  .dark .crm-date-input {
    color-scheme: dark;
  }
  .crm-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    margin-inline-start: 0.25rem;
    border-radius: 0.25rem;
    transition: opacity 0.15s ease;
  }
  .crm-date-input:hover::-webkit-calendar-picker-indicator {
    opacity: 0.85;
  }
  .crm-date-input:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
  }
  .crm-date-input::-webkit-datetime-edit {
    padding: 0;
  }
  .crm-date-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
}

@layer utilities {
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in { animation: fade-in 0.15s ease-out; }
  .sidebar-transition { transition: width 0.2s ease, transform 0.2s ease; }
}