/* ==========================================================================
   DzMed Academy — Unified Design System
   Forest-green Material-3-inspired theme, bilingual (LTR/RTL) + dark mode
   ========================================================================== */

:root {
  /* ---- Core palette (light) ---- */
  --color-error: #ba1a1a;
  --color-tertiary-container: #c14591;
  --color-secondary-fixed: #c7eeae;
  --color-on-background: #181d14;
  --color-on-primary-fixed: #072100;
  --color-outline: #717a68;
  --color-primary-container: #37850a;
  --color-tertiary-fixed: #ffd8e9;
  --color-inverse-primary: #88db5d;
  --color-on-surface-variant: #40493a;
  --color-on-secondary-fixed: #072100;
  --color-on-secondary-fixed-variant: #2f4f1f;
  --color-secondary-container: #c7eeae;
  --color-on-primary-container: #f8ffee;
  --color-secondary: #466735;
  --color-surface: #f6fbed;
  --color-on-error-container: #93000a;
  --color-surface-container-lowest: #ffffff;
  --color-surface-dim: #d6dcce;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-fixed: #3c0029;
  --color-on-primary-fixed-variant: #1d5200;
  --color-error-container: #ffdad6;
  --color-inverse-on-surface: #edf3e4;
  --color-tertiary: #a22b77;
  --color-on-error: #ffffff;
  --color-on-primary: #ffffff;
  --color-surface-container: #eaf0e1;
  --color-surface-container-high: #e5eadc;
  --color-on-surface: #181d14;
  --color-secondary-fixed-dim: #acd194;
  --color-surface-variant: #dfe5d6;
  --color-background: #f6fbed;
  --color-inverse-surface: #2c3228;
  --color-surface-container-low: #f0f6e7;
  --color-on-tertiary-container: #fffbff;
  --color-primary-fixed: #a2f876;
  --color-primary: #286a00;
  --color-outline-variant: #c0cab5;
  --color-surface-tint: #296c00;
  --color-on-tertiary-fixed-variant: #860e60;
  --color-on-secondary: #ffffff;
  --color-tertiary-fixed-dim: #ffafd8;
  --color-primary-fixed-dim: #88db5d;
  --color-surface-bright: #f6fbed;
  --color-on-secondary-container: #4c6d3a;
  --color-surface-container-highest: #dfe5d6;

  --radius-sm: 0.25rem;
  --radius-DEFAULT: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --space-base: 8px;
  --space-gutter: 24px;
  --space-margin-mobile: 16px;
  --space-margin-desktop: 40px;
  --container-max: 1280px;

  --sidebar-width: 16rem; /* 64 * 0.25rem = w-64, unified across app */
  --header-height: 5rem;  /* h-20 */

  --shadow-level2: 0px 4px 20px rgba(94, 128, 75, 0.12);
}

/* ---- Dark mode overrides ---- */
html.dark {
  --color-background: #12160d;
  --color-surface: #12160d;
  --color-surface-bright: #383f31;
  --color-surface-dim: #12160d;
  --color-surface-container-lowest: #0c1008;
  --color-surface-container-low: #1a1f14;
  --color-surface-container: #1e2418;
  --color-surface-container-high: #282e22;
  --color-surface-container-highest: #33392c;
  --color-on-surface: #e2e8d8;
  --color-on-surface-variant: #c0cab5;
  --color-outline: #8a9380;
  --color-outline-variant: #40493a;
  --color-on-background: #e2e8d8;
  --color-primary: #88db5d;
  --color-on-primary: #0f3d00;
  --color-primary-container: #1d5200;
  --color-on-primary-container: #a2f876;
  --color-secondary: #acd194;
  --color-on-secondary: #1a3510;
  --color-secondary-container: #2f4f1f;
  --color-on-secondary-container: #c7eeae;
  --color-tertiary: #ffafd8;
  --color-tertiary-container: #860e60;
  --color-on-tertiary-container: #ffd8e9;
  --color-inverse-surface: #e2e8d8;
  --color-inverse-on-surface: #2c3228;
}

* { -webkit-tap-highlight-color: transparent; }

html, body { background-color: var(--color-background); }

body {
  color: var(--color-on-surface);
  transition: background-color .25s ease, color .25s ease;
}

/* ---- RTL support ---- */
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
html[dir="rtl"] .ltr-only { direction: ltr; unicode-bidi: embed; }

/* ---- Utility components shared across pages ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
html.dark .glass-card {
  background: rgba(30, 36, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.hover-layer-2:hover {
  box-shadow: var(--shadow-level2);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-outline-variant);
  border-radius: 10px;
}

/* Active nav item marker */
.active-nav-border { position: relative; }
html[dir="ltr"] .active-nav-border::before,
html:not([dir="rtl"]) .active-nav-border::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px;
  background: var(--color-primary); border-radius: var(--radius-full);
}
html[dir="rtl"] .active-nav-border::before {
  content: ""; position: absolute; right: -12px; left: auto; top: 8px; bottom: 8px; width: 4px;
  background: var(--color-primary); border-radius: var(--radius-full);
}

/* Skeleton loading shimmer, used for perceived-perf on data fetch */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-container-high) 25%, var(--color-surface-container) 37%, var(--color-surface-container-high) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Toast notifications */
#toast-root {
  position: fixed; z-index: 9999; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: 100%; max-width: 420px; padding: 0 16px;
}
.toast {
  pointer-events: auto;
  background: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
  padding: 12px 20px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: flex; align-items: center; gap: 10px;
  animation: toast-in .25s ease;
  width: 100%;
}
.toast.success { background: var(--color-primary); color: var(--color-on-primary); }
.toast.error { background: var(--color-error); color: var(--color-on-error); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast.leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* Page fade-in on load (app shell ready) */
[data-app-ready="false"] { opacity: 0; }
[data-app-ready="true"] .app-fade-in { animation: fade-in .35s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

/* Sidebar / nav link common state */
.nav-link { color: var(--color-on-surface-variant); }
.nav-link.is-active {
  background: var(--color-secondary-container);
  color: var(--color-primary);
  font-weight: 700;
}
.nav-link:not(.is-active):hover {
  background: var(--color-surface-container-high);
}

/* Focus visibility (a11y floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

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

/* منع "ومضة النص الخام" لأيقونات Material Symbols (مثلاً "dashboard" تبان كنص
   عادي قبل ما يتحمل خط الأيقونات) — الأيقونة تبقى مخفية (بلا ما تاخذ حيّز إضافي)
   لين يتأكد المتصفح إن الخط تحمّل فعلاً، وقتها تتفعل عبر كلاس icons-ready. */
.material-symbols-outlined { visibility: hidden; }
html.icons-ready .material-symbols-outlined { visibility: visible; }