/* ================================================================
   Ebda Platform — Admin CSS (mirrors app.css exactly)
   Tailwind CSS v4: @import chain handled by @tailwindcss/postcss
   ================================================================ */

@import "tailwindcss";

/* ── Design Tokens ── */
@theme {
  --color-ebda-blue:    #1e3a8a;
  --color-ebda-blue-h:  #1e40af;
  --color-ebda-blue-d:  #152a63;
  --color-ebda-light:   #f8fafc;
  --color-ebda-surface: #ffffff;
  --font-tajawal: "Tajawal", sans-serif;
  --header-h: 5rem;
}

/* ── Base ── */
@layer base {
  body {
    @apply font-tajawal bg-[--color-ebda-light] text-gray-900 leading-relaxed antialiased;
  }
  :focus-visible {
    outline: 2px solid #1e3a8a;
    outline-offset: 2px;
  }
}

/* ── Components ── */
@layer components {

  .btn-primary {
    @apply bg-ebda-blue text-white px-8 py-3 rounded-2xl font-bold
           transition-all duration-300 hover:scale-[1.03] hover:bg-[#1e40af]
           hover:shadow-xl hover:shadow-blue-900/20
           active:scale-95 flex items-center justify-center cursor-pointer;
  }

  .btn-ghost {
    @apply text-gray-600 font-bold px-5 py-2.5 rounded-xl
           transition-all duration-300 hover:text-ebda-blue hover:bg-blue-50;
  }

  .btn-cta {
    @apply bg-white text-ebda-blue px-8 py-4 rounded-2xl font-bold text-lg
           hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl;
  }

  .btn-secondary {
    @apply border-2 border-white/30 text-white px-8 py-4 rounded-2xl font-bold text-lg
           hover:bg-white/10 transition-all duration-300;
  }

  .input-field {
    @apply w-full px-5 py-4 border-2 border-gray-100 bg-white rounded-2xl outline-none
           transition-all duration-300
           focus:border-ebda-blue/30 focus:ring-4 focus:ring-ebda-blue/5
           placeholder:text-gray-300 text-sm font-medium;
  }

  .ebda-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100;
  }

  .premium-card {
    @apply bg-white rounded-3xl shadow-sm border border-gray-50
           transition-all duration-500
           hover:shadow-xl hover:shadow-blue-900/5 hover:-translate-y-1;
  }

  .selection-card {
    @apply p-6 border-2 border-gray-100 rounded-[2rem] text-center
           transition-all duration-300
           hover:border-ebda-blue/30 hover:shadow-xl hover:shadow-gray-100
           cursor-pointer bg-white relative overflow-hidden;
  }

  .ebda-table-header { @apply bg-gradient-to-r from-gray-50 to-gray-100; }
  .ebda-th { @apply text-right py-4 px-6 text-xs font-bold text-gray-700 uppercase tracking-wider; }
  .ebda-td { @apply py-4 px-6; }
  .ebda-tr { @apply hover:bg-blue-50/30 transition-colors duration-200; }

  .ebda-logo {
    @apply h-[52px] w-auto shrink-0 object-contain
           transition-transform duration-300 group-hover:rotate-6;
  }
  .ebda-logo-text    { @apply text-[25px] font-black leading-none tracking-tighter block; }
  .ebda-logo-subtext { @apply text-[9.5px] font-bold uppercase tracking-widest mt-0.5 leading-none block; }
  .ebda-avatar       { @apply w-10 h-10; }

  .ebda-badge        { @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold; }
  .ebda-badge-blue   { @apply bg-blue-50 text-[#1e3a8a]; }
  .ebda-badge-green  { @apply bg-green-50 text-green-700; }
  .ebda-badge-red    { @apply bg-red-50 text-red-700; }
  .ebda-badge-yellow { @apply bg-yellow-50 text-yellow-700; }
  .ebda-badge-purple { @apply bg-purple-50 text-purple-700; }
  .ebda-badge-gray   { @apply bg-gray-100 text-gray-600; }

  .ebda-page-banner  { @apply bg-blue-50 rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 relative overflow-hidden; }
  .ebda-section-title { @apply text-sm font-black text-gray-400 uppercase tracking-widest mb-6 flex items-center gap-2; }
}

/* ── Animations ── */
.animate-fade-in  { animation: ebdaFadeIn  0.6s ease-out forwards; }
.animate-slide-in { animation: ebdaSlideIn 0.3s ease-out forwards; }

@keyframes ebdaFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ebdaSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Utilities ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[x-cloak] { display: none !important; }

/* ── Admin Pagination ── */
nav[aria-label="Pagination Navigation"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}