alrahma_sunday_school_api/apps/dashboard/src/app/globals.css

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

html.light {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #f97316;
  --sidebar-bg: #0a1128;
  --sidebar-text: #94a3b8;
  --sidebar-active: #ffffff;
}

@layer base {
  * {
    box-sizing: border-box;
  }

  body {
    @apply text-blue-950 antialiased transition-colors dark:text-slate-100;
    background-image:
      linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
  }
}

html.dark body {
  background-image:
    linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-full bg-orange-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-orange-500 dark:hover:bg-orange-400;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-full border border-stone-300 bg-white/85 px-5 py-2.5 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950/20 dark:text-blue-100 dark:hover:border-blue-400 dark:hover:text-white;
  }

  .btn-danger {
    @apply inline-flex items-center gap-2 rounded-full bg-red-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700 disabled:opacity-50;
  }

  .input-field {
    @apply w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-900 dark:bg-blue-950/50 dark:text-slate-100 dark:placeholder:text-slate-500 dark:focus:ring-orange-400;
  }

  .card {
    @apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
    border-color: rgb(231 229 228 / 0.8);
    background-color: rgb(255 255 255 / 0.82);
  }

  html.dark .card {
    border-color: rgb(30 60 140 / 0.40);
    background-color: rgb(11 25 55 / 0.72);
  }

  .badge-green {
    @apply inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300;
  }

  .badge-blue {
    @apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-950/40 dark:text-blue-300;
  }

  .badge-amber {
    @apply inline-flex items-center rounded-full bg-orange-100 px-2.5 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/40 dark:text-orange-300;
  }

  .badge-red {
    @apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-950/40 dark:text-red-300;
  }

  .badge-gray {
    @apply inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-600 dark:bg-blue-950/40 dark:text-slate-300;
  }

  .badge-purple {
    @apply inline-flex items-center rounded-full bg-teal-100 px-2.5 py-0.5 text-xs font-medium text-teal-700 dark:bg-teal-950/40 dark:text-teal-300;
  }

  .badge-indigo {
    @apply inline-flex items-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

@layer utilities {
  .dark .bg-slate-50 {
    background-color: rgb(7 16 46);
  }

  .dark .bg-white {
    background-color: rgb(11 25 55);
  }

  .dark .bg-white\/90 {
    background-color: rgb(11 25 55 / 0.9);
  }

  .dark .border-slate-200,
  .dark .border-stone-200 {
    border-color: rgb(30 60 140 / 0.50);
  }

  .dark .text-slate-900 {
    color: rgb(241 245 249);
  }

  .dark .text-slate-700 {
    color: rgb(203 213 225);
  }

  .dark .text-slate-600,
  .dark .text-stone-500 {
    color: rgb(148 163 184);
  }

  .dark .text-slate-500,
  .dark .text-slate-400,
  .dark .text-stone-400 {
    color: rgb(100 116 139);
  }

  .dark .hover\:bg-slate-100:hover {
    background-color: rgb(20 42 90);
  }

  .dark .hover\:text-slate-900:hover {
    color: rgb(241 245 249);
  }
}