/* نظام التصميم: مأخوذ من منصة الأكاديمية — نيلي للفعل، وذهبي للتمييز، وقائمة جانبية ليلية.
   ملف واحد تشترك فيه الواجهتان، فلا يختلف مظهرهما. */

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/shared/fonts/ibm-plex-arabic/IBMPlexSansArabic-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/shared/fonts/ibm-plex-arabic/IBMPlexSansArabic-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/shared/fonts/ibm-plex-arabic/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/shared/fonts/ibm-plex-arabic/IBMPlexSansArabic-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('/shared/fonts/tajawal/Tajawal-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('/shared/fonts/tajawal/Tajawal-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap; src: url('/shared/fonts/tajawal/Tajawal-ExtraBold.ttf') format('truetype'); }

/* نسبة الحلقة: تُسجَّل ليتحرك امتلاؤها بسلاسة بدل أن يقفز */
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  color-scheme: light;

  /* الهوية: نيلي عميق للفعل والتنقل، وذهبي للتمييز وحده */
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-tint: #eef0fe;
  --primary-text: #3730a3;
  --primary-foreground: #ffffff;

  --accent: #f5a524;
  --accent-hover: #e08e0b;
  --accent-text: #b45309;
  --accent-foreground: #3a2a05;

  --background: #f6f7fb;
  --foreground: #161936;
  --card: #ffffff;
  --popover: #ffffff;
  --border: #e3e6f0;
  --border-strong: #d0d5e4;
  --muted: #f0f2f8;
  --muted-foreground: #5d6482;
  --secondary: #eef0fe;
  --secondary-foreground: #3730a3;

  --success: #15803d;
  --success-soft: #e9f6ee;
  --warning: #b45309;
  --warning-soft: #fdf3e3;
  --danger: #b91c1c;
  --danger-soft: #fdecec;
  --info: #0369a1;
  --info-soft: #e6f3fb;
  --neutral: #4d5470;
  --neutral-soft: #eef0f6;

  --input: #d0d5e4;
  --ring: #4f46e5;

  /* القائمة الجانبية الليلية: السطح المميِّز للمنصة */
  --sidebar: #14153a;
  --sidebar-foreground: #c7cae8;
  --sidebar-muted: #8e93be;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-primary: #fbbf24;
  --sidebar-accent: rgba(255, 255, 255, 0.09);

  /* سلّم الخط العربي: 12 / 14 / 16 / 20 / 24 / 32 */
  --text-micro: 0.75rem;
  --text-body: 0.875rem;
  --text-lead: 1rem;
  --text-title: 1.25rem;
  --text-heading: 1.5rem;
  --text-display: 2rem;

  --font-sans: 'IBM Plex Sans Arabic', 'Tajawal', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --font-serif: 'Tajawal', 'IBM Plex Sans Arabic', serif;

  /* زوايا هادئة: الأدوات 10، والبطاقات 12 و16، والنوافذ 20 */
  --radius-sm: 0.5rem;
  --radius: 0.625rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(20, 22, 58, 0.04);
  --shadow-sm: 0 8px 24px -22px rgba(15, 40, 87, 0.48);
  --shadow-md: 0 18px 40px -22px rgba(20, 22, 58, 0.45);
  --shadow-lg: 0 16px 40px rgba(20, 22, 58, 0.16);

  --sidebar-width: 264px;
  --header-height: 64px;
  --fast: 150ms ease;
  --base: 240ms cubic-bezier(0.2, 0.85, 0.25, 1);
  --slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wave-step: 45ms;
  --shell-offset: 0ms;
}

/* ------------------------------------------------------------------ الحركات */
@keyframes wave-in {
  0% { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(3px); }
  55% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes sidebar-open {
  0% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes nav-item-in {
  0% { opacity: 0; transform: translateX(18px); }
  100% { opacity: 1; transform: none; }
}
@keyframes header-drop {
  0% { opacity: 0; transform: translateY(-110%); filter: blur(6px); }
  70% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateY(-18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-timer-drain {
  from { width: 100%; }
  to { width: 0%; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes soft-pulse { 50% { opacity: 0.45; } }
@keyframes bar-stripes { from { background-position: 0 0; } to { background-position: 44px 0; } }
@keyframes orb-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14px, -12px, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}