/* ================================================================
   Ebda Platform — Unified Design System
   Single source of truth for ALL layouts (public + admin)
   ================================================================ */

@import "tailwindcss";

/* ── Design Tokens (CSS custom properties via @theme) ── */
@theme {
  /* Brand Colors */
  --color-ebda-blue:    #1e3a8a;   /* Navy — primary brand */
  --color-ebda-blue-h:  #1e40af;   /* Hover state */
  --color-ebda-blue-d:  #152a63;   /* Dark / pressed state */
  --color-ebda-light:   #f8fafc;   /* Page background */
  --color-ebda-surface: #ffffff;   /* Card / panel surface */

  /* Typography */
  --font-tajawal: "Tajawal", sans-serif;

  /* Spacing (header height token — used by both navbars & sidebar) */
  --header-h: 5rem; /* 80px = h-20 */
}

/* ── Base Layer ── */
@layer base {
  body {
    @apply font-tajawal bg-[--color-ebda-light] text-gray-900 leading-relaxed antialiased;
    font-feature-settings: "kern" 1, "liga" 1;
  }

  /* Smooth focus ring for accessibility */
  :focus-visible {
    outline: 2px solid #1e3a8a;
    outline-offset: 2px;
  }
}

/* ── Component Layer (reusable classes across all pages) ── */
@layer components {

  /* ── Buttons ────────────────────────────────── */

  /* Primary — Navy filled */
  .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;
  }

  /* Ghost — transparent, hover navy */
  .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;
  }

  /* CTA — white on dark backgrounds */
  .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;
  }

  /* Secondary — outlined on dark backgrounds */
  .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;
  }

  /* ── Form Inputs ─────────────────────────────── */

  .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;
  }

  /* ── Cards ───────────────────────────────────── */

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

  /* Premium public-facing card */
  .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 (onboarding / interests) */
  .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;
  }

  /* ── Tables ──────────────────────────────────── */

  .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;
  }

  /* ── Design Tokens — Logo ─────────────────────── */
  /* Canonical logo image — same height everywhere: 52px */
  .ebda-logo {
    @apply h-[52px] w-auto shrink-0 object-contain
           transition-transform duration-300 group-hover:rotate-6;
  }

  /* Logo text "ابدأ" */
  .ebda-logo-text {
    @apply text-[25px] font-black leading-none tracking-tighter block;
  }

  /* Logo subtext "EBDA PLATFORM" */
  .ebda-logo-subtext {
    @apply text-[9.5px] font-bold uppercase tracking-widest mt-0.5 leading-none block;
  }

  /* ── Design Tokens — Avatar ───────────────────── */
  /* Standard avatar size used in nav & tables */
  .ebda-avatar {
    @apply w-10 h-10; /* 40×40 px */
  }

  /* ── Badges / Pills ──────────────────────────── */
  .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; }

  /* ── Page Header Banner (reused across all admin pages) ── */
  .ebda-page-banner {
    @apply bg-blue-50 rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 relative overflow-hidden;
  }

  /* ── Section Heading ─────────────────────────── */
  .ebda-section-title {
    @apply text-sm font-black text-gray-400 uppercase tracking-widest mb-6 flex items-center gap-2;
  }

  /* ── Wishlist / Favorite Button ───────────────── */

  /*
   * The floating heart overlay sits on top of course card images (top-left
   * in RTL layouts). It uses a glass-morphism backdrop with no chunky box
   * background. Two states:
   *   • Unfavorited: semi-transparent dark glass, white outline heart
   *   • Favorited  : white glass pill, filled red heart
   */
  .wishlist-btn {
    /* GPU-composited properties only — no layout-triggering repaints */
    will-change: transform;
  }

  /* Pulse animation triggered on ADDING to wishlist */
  .wishlist-btn--pulse-add {
    animation: wlHeartBeat 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
  }

  /* Shrink + fade triggered on REMOVING from wishlist */
  .wishlist-btn--pulse-remove {
    animation: wlHeartShrink 0.35s ease-out forwards;
  }

  /* The SVG icon itself gets the scale animation */
  .wishlist-btn--pulse-add svg,
  .wishlist-btn--active svg {
    transform-origin: center;
  }
}

/* ── Global 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); }
}

/* ── Wishlist Heart Micro-Animations ── */

/* Heart beat (scale up then settle) — used on ADD */
@keyframes wlHeartBeat {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.35); }
  50%  { transform: scale(0.9); }
  75%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Heart shrink (scale down) — used on REMOVE */
@keyframes wlHeartShrink {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.65); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Flying heart particle — decorative puff on ADD */
@keyframes wlHeartFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.4); }
}

/* ── Scrollbar Utility ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Alpine.js cloak ── */
[x-cloak] { display: none !important; }