/**
 * ============================================================================
 * Project Noyan - Scientific Adventure & Senior Elementary Theme (v2.0.0)
 * ============================================================================
 * File: /static/css/noyan-theme-grade5.css
 * Target Audience: Senior Elementary (Grades 5 & 6, Ages 10-11 Years)
 * Design Foundations:
 *   - Visual Palette: Deep Indigo (#1A2238), Brass Gold (#E0A96D), Crisp Sand (#F4F0EA)
 *   - Visual Density: Tightened padding, sleek borders, information richness
 *   - Geometry: Refined organic radii (16px to 20px)
 *   - Ergonomics & Motor Skills: Fitts's Law touch targets (48px to 56px minimum)
 *   - Circadian Health: Seamless warm amber melatonin shield (19:00 - 07:00) with zero layout shifts
 * ============================================================================
 */

@import url('noyan-theme.css');

/* ----------------------------------------------------------------------------
 * 1. DESIGN TOKENS & SYSTEM VARIABLES FOR GRADE 5 (متغیرهای طراحی ارشد دبستان)
 * ------------------------------------------------------------------------- */
:root,
[data-grade="5"],
[data-grade="6"],
body.theme-grade-5 {
  /* --- A. Palette: Scientific Adventure & Academic Elegance --- */
  --noyan-bg-base: #F4F0EA;                  /* Crisp Sand - پس‌زمینه پوستی ارگانیک و خوانا */
  --noyan-bg-subtle: #EBE5DB;                /* ماسه‌ای روشن لایه دوم */
  --noyan-bg-card: rgba(255, 255, 255, 0.94);/* شیشه سفید شیری منسجم */
  --noyan-bg-card-solid: #FFFFFF;
  --noyan-bg-dark: #1A2238;                  /* Deep Indigo - آبی لاجوردی عمیق کاوشگری */
  --noyan-bg-dark-surface: #222C46;          /* لایه دوم ایندیگو */

  /* --- B. High-Contrast Typography --- */
  --noyan-text-title: #1A2238;               /* لاجوردی تیره و قاطع برای تیترها */
  --noyan-text-body: #2B3347;                /* خاکستری سورمه‌ای ملایم و ارگونومیک */
  --noyan-text-muted: #64748B;               /* متن‌های راهنما و متادیتا */
  --noyan-text-on-accent: #FFFFFF;

  /* --- C. Signature Grade 5 Accents --- */
  --noyan-indigo-main: #1A2238;
  --noyan-indigo-shadow: #0F1524;
  --noyan-indigo-light: #EEF2F6;
  --noyan-indigo-gradient: linear-gradient(135deg, #242F4C 0%, #1A2238 100%);

  --noyan-brass-main: #E0A96D;               /* Brass Gold - طلای برنجی، چرخ‌دنده‌ها و اسطرلاب */
  --noyan-brass-shadow: #B87B3D;
  --noyan-brass-light: #FBF4EB;
  --noyan-brass-gradient: linear-gradient(135deg, #F0C495 0%, #E0A96D 100%);

  --noyan-sand-main: #F4F0EA;

  /* --- D. Subject-Specific Curricular Palettes (رنگ‌های تخصصی دروس پایه پنجم) --- */
  /* ۱. ریاضیات: Lapis & Cobalt Blue */
  --noyan-math-accent: #2B4C7E;
  --noyan-math-shadow: #193256;
  --noyan-math-light: #EBF2FA;
  --noyan-math-gradient: linear-gradient(135deg, #365B96 0%, #2B4C7E 100%);

  /* ۲. فارسی و نگارش: Antique Carmine & Burgundy */
  --noyan-farsi-accent: #8D3B4C;
  --noyan-farsi-shadow: #5E232F;
  --noyan-farsi-light: #FBF0F2;
  --noyan-farsi-gradient: linear-gradient(135deg, #A4485C 0%, #8D3B4C 100%);

  /* ۳. علوم تجربی: Verdigris & Scientific Emerald */
  --noyan-science-accent: #2A7B62;
  --noyan-science-shadow: #185241;
  --noyan-science-light: #EDF7F4;
  --noyan-science-gradient: linear-gradient(135deg, #359678 0%, #2A7B62 100%);

  /* --- E. Refined Organic Geometry & Higher Density (انحناهای تیزتر و چگالی بصری بالاتر) --- */
  --radius-sm: 12px;
  --radius-btn: 16px;
  --radius-bubble: 18px;
  --radius-card: 20px;                       /* ۱۶ تا ۲۰ پیکسل به جای انحناهای ۳۲ پیکسلی خردسالان */
  --radius-hero: 24px;
  --radius-full: 9999px;

  /* --- F. Pre-Adolescent Hand Ergonomics (Fitts's Law 48px-56px) --- */
  --touch-min-size: 48px;                    /* حداقل اندازه هدف لمسی برای دانش‌آموزان ۱۰-۱۱ سال */
  --touch-ideal-size: 56px;
  --touch-safe-gap: 12px;

  /* --- G. Sleek Tactile Shadows (سایه‌های دقیق و تیزتر بدون شلختگی) --- */
  --shadow-card: 0 10px 25px -4px rgba(26, 34, 56, 0.09), 0 2px 6px -1px rgba(26, 34, 56, 0.04);
  --shadow-floating: 0 20px 40px -8px rgba(26, 34, 56, 0.16);
  --shadow-btn-sleek: 0 4px 0 rgba(26, 34, 56, 0.2), 0 8px 16px rgba(26, 34, 56, 0.12);
  --shadow-btn-sleek-active: 0 1px 0 rgba(26, 34, 56, 0.2), 0 3px 6px rgba(26, 34, 56, 0.1);
}

/* ----------------------------------------------------------------------------
 * 2. GLOBAL VIEWPORT & BODY RESTYLING (فضای پس‌زمینه علمی و ماجراجویی)
 * ------------------------------------------------------------------------- */
body.theme-grade-5,
[data-grade="5"] body,
[data-grade="6"] body {
  background: linear-gradient(180deg, #F4F0EA 0%, #EFE8DD 45%, #E3DDD1 100%) !important;
  color: var(--noyan-text-body) !important;
}

/* ----------------------------------------------------------------------------
 * 3. ADVANCED HUD HEADER (نوار وضعیت متمرکز، علمی و دقیق)
 * ------------------------------------------------------------------------- */
body.theme-grade-5 .hub-hud-header,
[data-grade="5"] .hub-hud-header,
[data-grade="6"] .hub-hud-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid var(--noyan-brass-main) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 12px 32px rgba(26, 34, 56, 0.08), 0 0 0 1px rgba(224, 169, 109, 0.2) !important;
  padding: 8px 20px !important;
  min-height: 60px;
}

/* نشان آواتار کودک */
body.theme-grade-5 .child-avatar-disc,
[data-grade="5"] .child-avatar-disc,
[data-grade="6"] .child-avatar-disc {
  width: 48px !important;
  height: 48px !important;
  background: var(--noyan-indigo-gradient) !important;
  border: 2.5px solid var(--noyan-brass-main) !important;
  box-shadow: 0 4px 12px rgba(26, 34, 56, 0.25) !important;
}

/* عناوین کودک */
body.theme-grade-5 .child-alias-title,
[data-grade="5"] .child-alias-title,
[data-grade="6"] .child-alias-title {
  color: var(--noyan-indigo-main) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
}

body.theme-grade-5 .child-grade-subtitle,
[data-grade="5"] .child-grade-subtitle,
[data-grade="6"] .child-grade-subtitle {
  color: var(--noyan-brass-shadow) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
}

/* مدال رتبه و بلوط‌های طلایی */
body.theme-grade-5 .rank-medal-pill,
[data-grade="5"] .rank-medal-pill,
[data-grade="6"] .rank-medal-pill {
  background: var(--noyan-indigo-main) !important;
  color: var(--noyan-brass-main) !important;
  border: 1.5px solid var(--noyan-brass-main) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
}

body.theme-grade-5 .acorn-pill-btn,
[data-grade="5"] .acorn-pill-btn,
[data-grade="6"] .acorn-pill-btn {
  background: var(--noyan-brass-light) !important;
  border: 2px solid var(--noyan-brass-main) !important;
  color: #78350F !important;
  border-radius: var(--radius-sm) !important;
  min-height: var(--touch-min-size) !important;
  box-shadow: 0 4px 10px rgba(224, 169, 109, 0.25) !important;
}

/* دکمه‌های ناوبری سریع اولیا و دانلود در HUD */
body.theme-grade-5 .quick-action-btn,
[data-grade="5"] .quick-action-btn,
[data-grade="6"] .quick-action-btn {
  background: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: var(--radius-sm) !important;
  color: var(--noyan-indigo-main) !important;
  font-weight: 800 !important;
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 6px 14px !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.theme-grade-5 .quick-action-btn:hover,
[data-grade="5"] .quick-action-btn:hover,
[data-grade="6"] .quick-action-btn:hover {
  border-color: var(--noyan-brass-main) !important;
  background: var(--noyan-brass-light) !important;
  transform: translateY(-2px) !important;
}

/* ----------------------------------------------------------------------------
 * 4. GRADE SELECTOR PILLS (سلکتور هوشمند پایه‌های ۱ تا ۶ با ارگونومی فیتس)
 * ------------------------------------------------------------------------- */
body.theme-grade-5 .btn-grade-pill,
[data-grade="5"] .btn-grade-pill,
[data-grade="6"] .btn-grade-pill {
  min-height: 48px !important;
  min-width: 72px !important;
  border-radius: var(--radius-btn) !important;
  padding: 8px 18px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  background: #FFFFFF !important;
  border: 2px solid #CBD5E1 !important;
  color: var(--noyan-text-body) !important;
  touch-action: manipulation !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.theme-grade-5 .btn-grade-pill.active,
[data-grade="5"] .btn-grade-pill.active,
[data-grade="6"] .btn-grade-pill.active {
  background: var(--noyan-indigo-main) !important;
  border-color: var(--noyan-brass-main) !important;
  color: var(--noyan-brass-main) !important;
  box-shadow: 0 4px 14px rgba(26, 34, 56, 0.3), 0 0 0 2px rgba(224, 169, 109, 0.3) !important;
  transform: scale(1.04) !important;
}

/* ----------------------------------------------------------------------------
 * 5. HIGH-DENSITY ISLAND CARDS (کارت‌های جزیره با چگالی بصری بالا و حاشیه متمرکز)
 * ------------------------------------------------------------------------- */
body.theme-grade-5 .hub-island-card,
[data-grade="5"] .hub-island-card,
[data-grade="6"] .hub-island-card {
  border-radius: var(--radius-card) !important;
  padding: 18px 20px !important;            /* فشرده‌سازی پدینگ جهت چگالی اطلاعات بالاتر */
  background: var(--noyan-bg-card) !important;
  border: 2px solid #E2E8F0 !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

body.theme-grade-5 .hub-island-card:hover,
[data-grade="5"] .hub-island-card:hover,
[data-grade="6"] .hub-island-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-floating) !important;
  border-color: var(--noyan-brass-main) !important;
}

/* خط بالای کارت با نشان متمایز */
body.theme-grade-5 .hub-island-card::before,
[data-grade="5"] .hub-island-card::before,
[data-grade="6"] .hub-island-card::before {
  height: 5px !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}

/* ۱. جزیره ریاضی پایه پنجم (Lapis Blue & Indigo) */
body.theme-grade-5 .card-math,
[data-grade="5"] .card-math,
[data-grade="6"] .card-math {
  border-color: #CBD5E1 !important;
}
body.theme-grade-5 .card-math::before,
[data-grade="5"] .card-math::before,
[data-grade="6"] .card-math::before {
  background: var(--noyan-math-gradient) !important;
}

/* ۲. جزیره فارسی و نگارش پایه پنجم (Carmine Burgundy) */
body.theme-grade-5 .card-farsi,
[data-grade="5"] .card-farsi,
[data-grade="6"] .card-farsi {
  border-color: #E2D4D8 !important;
}
body.theme-grade-5 .card-farsi::before,
[data-grade="5"] .card-farsi::before,
[data-grade="6"] .card-farsi::before {
  background: var(--noyan-farsi-gradient) !important;
}

/* ۳. جزیره علوم تجربی پایه پنجم (Verdigris Emerald) */
body.theme-grade-5 .card-science,
[data-grade="5"] .card-science,
[data-grade="6"] .card-science {
  border-color: #CFE3DC !important;
}
body.theme-grade-5 .card-science::before,
[data-grade="5"] .card-science::before,
[data-grade="6"] .card-science::before {
  background: var(--noyan-science-gradient) !important;
}

/* تایتل و ساب‌تایتل کارت‌های جزیره */
body.theme-grade-5 .island-title,
[data-grade="5"] .island-title,
[data-grade="6"] .island-title {
  color: var(--noyan-indigo-main) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
}

body.theme-grade-5 .island-subtitle,
[data-grade="5"] .island-subtitle,
[data-grade="6"] .island-subtitle {
  color: var(--noyan-text-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

body.theme-grade-5 .island-card-desc,
[data-grade="5"] .island-card-desc,
[data-grade="6"] .island-card-desc {
  color: var(--noyan-text-body) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  margin: 10px 0 14px 0 !important;
}

/* نوار آمار و ستاره‌ها */
body.theme-grade-5 .island-stats-bar,
[data-grade="5"] .island-stats-bar,
[data-grade="6"] .island-stats-bar {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: var(--noyan-indigo-main) !important;
}

/* ----------------------------------------------------------------------------
 * 6. FITTS'S LAW TOUCH BUTTONS (کلیدهای تعاملی با حداقل ارتفاع ۴۸ تا ۵۶ پیکسل)
 * ------------------------------------------------------------------------- */
body.theme-grade-5 .hub-interactive-btn,
[data-grade="5"] .hub-interactive-btn,
[data-grade="6"] .hub-interactive-btn {
  min-height: var(--touch-min-size) !important; /* حداقل ۴۸ پیکسل مطابق استاندارد Fitts */
  border-radius: var(--radius-btn) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.theme-grade-5 .hub-interactive-btn:active,
[data-grade="5"] .hub-interactive-btn:active,
[data-grade="6"] .hub-interactive-btn:active {
  transform: translateY(2px) !important;     /* فیدبک لمسی دقیق و تیز برای سنین ۱۰-۱۱ سال */
}

/* پالت کلیدهای اختصاصی دروس */
body.theme-grade-5 .btn-runner,
[data-grade="5"] .btn-runner,
[data-grade="6"] .btn-runner {
  background: var(--noyan-math-gradient) !important;
  box-shadow: 0 4px 12px rgba(43, 76, 126, 0.25) !important;
  color: #FFFFFF !important;
}

body.theme-grade-5 .card-farsi .btn-runner,
[data-grade="5"] .card-farsi .btn-runner,
[data-grade="6"] .card-farsi .btn-runner {
  background: var(--noyan-farsi-gradient) !important;
  box-shadow: 0 4px 12px rgba(141, 59, 76, 0.25) !important;
}

body.theme-grade-5 .card-science .btn-runner,
[data-grade="5"] .card-science .btn-runner,
[data-grade="6"] .card-science .btn-runner {
  background: var(--noyan-science-gradient) !important;
  box-shadow: 0 4px 12px rgba(42, 123, 98, 0.25) !important;
}

body.theme-grade-5 .btn-pilot,
[data-grade="5"] .btn-pilot,
[data-grade="6"] .btn-pilot {
  background: linear-gradient(135deg, #1A2238 0%, #2A3859 100%) !important;
  border: 1.5px solid var(--noyan-brass-main) !important;
  color: var(--noyan-brass-main) !important;
  box-shadow: 0 4px 12px rgba(26, 34, 56, 0.2) !important;
}

/* ----------------------------------------------------------------------------
 * 7. CIRCADIAN VISION WARMTH INTEGRATION (فیلتر شبانه بدون تغییر چیدمان)
 * ------------------------------------------------------------------------- */
/* 
 * الزامات دقیق Point 12:
 * - اعمال فیلتر بر روی سطح رندر بدون تغییر margin, padding, width, height (Zero Layout Shift)
 * - حفظ کنتراست بالای لاجوردی، طلای برنجی و ماسه‌ای با کاهش نور آبی مضر
 */
html.circadian-night,
body.circadian-night,
body.theme-grade-5.circadian-night,
[data-grade="5"] body.circadian-night {
  filter: sepia(18%) hue-rotate(-10deg) brightness(97%) contrast(102%) !important;
  transition: filter 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}