/**
 * استایل پنل فرانت‌اند افزونه HEX School (شورت‌کد [hex_school_panel])
 * تم رنگی: آبی تیره (#16a085) و آبی روشن (#1abc9c) با سایه‌های سفید و طوسی ملایم
 */

/**
 * فونت وزیر (Vazirmatn) - سه وزن اصلی برای استفاده در کل پنل.
 * فایل‌های فونت باید داخل پوشه‌ی assets/fonts افزونه قرار بگیرند:
 * hex-school/assets/fonts/Vazirmatn-Regular.woff2  (وزن 400)
 * hex-school/assets/fonts/Vazirmatn-Medium.woff2   (وزن 500)
 * hex-school/assets/fonts/Vazirmatn-Bold.woff2     (وزن 700)
 * تا زمانی که این فایل‌ها آپلود نشوند، مرورگر خودکار به فونت جایگزین
 * (Tahoma/سیستم) برمی‌گردد و ظاهر افزونه خراب نمی‌شود.
 */
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ======================================================================
   فاز ۱ — توکن‌های رنگی (پالت‌ها) + سیستم قالب پنل
   ======================================================================
   این بخش فقط متغیرهای CSS (Custom Properties) رنگی پنل را تعریف می‌کند؛
   در این فاز هیچ رنگ hardcode ای در بقیه‌ی فایل جایگزین نمی‌شود و رفتار
   بصری فعلی پنل کاملاً بدون تغییر باقی می‌ماند. مهاجرت تدریجی بخش‌های
   مختلف (منو، محتوا، متن‌ها، دکمه‌ها، عنوان صفحات و ...) به این توکن‌ها
   طی فازهای بعدی (۴ به بعد) انجام می‌شود.

   پالت پیش‌فرض («روشن/سبز» فعلی) روی :root تعریف شده و برای فعال‌سازی
   پالت تیره کافی است ویژگی data-hex-theme="dark" روی المان ریشه‌ی پنل
   (hex-school-frontend-panel) یا هر جدِ دیگری قرار بگیرد؛ چون فرزندان
   selector هم به‌صورت خودکار مقادیر تیره را به ارث می‌برند.
   افزودن پالت جدید در آینده (فاز ۲) فقط یعنی افزودن یک selector مشابه
   با همین اسامی متغیر و مقادیر رنگی متفاوت. */

:root,
[data-hex-theme="light"] {
	/* --- پس‌زمینه‌ها --- */
	--hex-bg-page: #f8fafc;         /* پس‌زمینه‌ی کلی صفحه/بوم پنل */
	--hex-bg-content: #ffffff;      /* پس‌زمینه‌ی ناحیه‌ی اصلی محتوا */
	--hex-bg-card: #ffffff;         /* پس‌زمینه‌ی کارت‌ها و جعبه‌ها */
	--hex-bg-soft: #f1f5f9;         /* پس‌زمینه‌ی ملایم (دکمه ثانویه، ردیف زوج جدول و...) */
	--hex-bg-menu: #1a2332;         /* پس‌زمینه‌ی منوی کناری */
	--hex-bg-menu-active: #1b2f3a;  /* پس‌زمینه‌ی آیتم فعال منو */
	--hex-bg-header: #ffffff;       /* پس‌زمینه‌ی نوار هدر بالای صفحه */

	/* --- متن‌ها --- */
	--hex-text-primary: #0f172a;    /* متن اصلی/پررنگ */
	--hex-text-heading: #1e293b;    /* عنوان‌ها */
	--hex-text-secondary: #64748b;  /* متن فرعی */
	--hex-text-muted: #94a3b8;      /* متن کم‌رنگ/غیرفعال */
	--hex-text-on-primary: #ffffff; /* متن روی پس‌زمینه‌های رنگی برند (دکمه‌ها و ...) */
	--hex-text-menu: #8a97ab;       /* متن آیتم‌های منو (حالت عادی) */
	--hex-text-menu-active: #ffffff;/* متن آیتم فعال/هاور منو */

	/* --- خطوط و border --- */
	--hex-border: #e2e8f0;          /* border عمومی */
	--hex-border-light: #f1f5f9;    /* border بسیار ملایم */
	--hex-border-strong: #cbd5e1;   /* border پررنگ‌تر (روی پس‌زمینه‌های روشن) */

	/* --- رنگ‌های برند/اصلی --- */
	--hex-primary: #16a085;         /* رنگ اصلی برند (سبزآبی تیره) */
	--hex-primary-rgb: 22, 160, 133; /* همان --hex-primary به‌صورت rgb، برای استفاده در rgba() (مثل سایه‌ی دکمه‌ها) */
	--hex-primary-light: #1abc9c;   /* رنگ اصلی برند (سبزآبی روشن) */
	--hex-primary-dark: #0f766e;    /* حالت hover/تیره‌ی رنگ برند */
	--hex-primary-soft: #e8f8f5;    /* پس‌زمینه‌ی ملایم بر پایه‌ی رنگ برند */
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	/* --- دکمه‌ها --- */
	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: var(--hex-primary-dark);
	--hex-btn-primary-text: #ffffff;
	--hex-btn-secondary-bg: #f1f5f9;
	--hex-btn-secondary-bg-hover: #e2e8f0;
	--hex-btn-secondary-text: #334155;
	--hex-btn-danger-bg: #dc2626;
	--hex-btn-danger-bg-hover: #b91c1c;
	--hex-btn-danger-text: #ffffff;

	/* --- رنگ‌های وضعیتی --- */
	--hex-color-success: #16a34a;
	--hex-color-success-bg: #ecfdf5;
	--hex-color-success-light: #22c55e; /* توقف روشنِ گرادیان/نمودار (فاز ۲۱) */
	--hex-color-warning: #f59e0b;
	--hex-color-warning-bg: #fef3c7;
	--hex-color-warning-light: #fbbf24; /* توقف روشنِ گرادیان/نمودار (فاز ۲۱) */
	--hex-color-warning-text: #92400e;  /* متن با کنتراست کافی روی hex-color-warning-bg (فاز ۲۱) */
	--hex-color-error: #dc2626;
	--hex-color-error-bg: #fee2e2;
	--hex-color-error-light: #ef4444;   /* توقف روشنِ گرادیان/نمودار (فاز ۲۱) */
	--hex-color-error-text: #991b1b;    /* متن با کنتراست کافی روی hex-color-error-bg (فاز ۲۱) */
	--hex-color-info: #7c3aed;
	--hex-color-info-bg: #f3effc;
	--hex-color-info-light: #a78bfa;    /* توقف روشنِ گرادیان (فاز ۲۱) */

	/* --- حالت hover برای پس‌زمینه‌های ملایمِ برند (badge/آیکن‌های دایره‌ای) --- */
	--hex-primary-soft-hover: #d0f2ec;

	/* --- بخش «آمار» صفحه اصلی: باکس تیره‌ی متمایز از بقیه‌ی بخش‌ها (نک.
	   .hex-homepage-stats)؛ چون در پالت روشن/رنگی، خودِ صفحه روشن است،
	   اینجا مقادیر تیره تعریف می‌شوند؛ در پالت تیره (زیر) که خودِ صفحه هم
	   تیره است، همین توکن‌ها برعکس و رنگی/روشن بازتعریف می‌شوند تا باکس
	   همچنان به‌عنوان یک عنصر متمایز به چشم بیاید. --- */
	--hex-stats-bg: #0f172a;
	--hex-stats-card-bg: #1e293b;
	--hex-stats-card-border: #334155;
	--hex-stats-heading: #f8fafc;
	--hex-stats-label: #cbd5e1;
}

/* پالت روشن/آبی (Blue) — طبق تصمیم بخش «تنظیمات قالب»، این پالت با گذاشتن
   ویژگی data-hex-theme="blue" روی wrapper اصلی پنل فعال می‌شود. ساختار آن
   دقیقاً مثل پالت «روشن (سبز)» است (پس‌زمینه‌ها/متن‌ها/border یکسان) و فقط
   رنگ‌های برند (primary) و منو به آبی تغییر کرده‌اند. */
[data-hex-theme="blue"] {
	/* --- پس‌زمینه‌ها --- */
	--hex-bg-page: #f8fafc;
	--hex-bg-content: #ffffff;
	--hex-bg-card: #ffffff;
	--hex-bg-soft: #f1f5f9;
	--hex-bg-menu: #0f2a4d;
	--hex-bg-menu-active: #123a68;
	--hex-bg-header: #ffffff;

	/* --- متن‌ها --- */
	--hex-text-primary: #0f172a;
	--hex-text-heading: #1e293b;
	--hex-text-secondary: #64748b;
	--hex-text-muted: #94a3b8;
	--hex-text-on-primary: #ffffff;
	--hex-text-menu: #8a9bb5;
	--hex-text-menu-active: #ffffff;

	/* --- خطوط و border --- */
	--hex-border: #e2e8f0;
	--hex-border-light: #f1f5f9;
	--hex-border-strong: #cbd5e1;

	/* --- رنگ‌های برند/اصلی --- */
	--hex-primary: #2563eb;
	--hex-primary-rgb: 37, 99, 235;
	--hex-primary-light: #3b82f6;
	--hex-primary-dark: #1d4ed8;
	--hex-primary-soft: #eff6ff;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	/* --- دکمه‌ها --- */
	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: var(--hex-primary-dark);
	--hex-btn-primary-text: #ffffff;
	--hex-btn-secondary-bg: #f1f5f9;
	--hex-btn-secondary-bg-hover: #e2e8f0;
	--hex-btn-secondary-text: #334155;
	--hex-btn-danger-bg: #dc2626;
	--hex-btn-danger-bg-hover: #b91c1c;
	--hex-btn-danger-text: #ffffff;

	/* --- رنگ‌های وضعیتی --- */
	--hex-color-success: #16a34a;
	--hex-color-success-bg: #ecfdf5;
	--hex-color-success-light: #22c55e;
	--hex-color-warning: #f59e0b;
	--hex-color-warning-bg: #fef3c7;
	--hex-color-warning-light: #fbbf24;
	--hex-color-warning-text: #92400e;
	--hex-color-error: #dc2626;
	--hex-color-error-bg: #fee2e2;
	--hex-color-error-light: #ef4444;
	--hex-color-error-text: #991b1b;
	--hex-color-info: #7c3aed;
	--hex-color-info-bg: #f3effc;
	--hex-color-info-light: #a78bfa;

	/* --- حالت hover برای پس‌زمینه‌های ملایمِ برند (badge/آیکن‌های دایره‌ای) --- */
	--hex-primary-soft-hover: #dbeafe;
}

/* پالت روشن/ارغوانی (Purple) — طبق تصمیم بخش «تنظیمات قالب»، این پالت با
   گذاشتن ویژگی data-hex-theme="purple" روی wrapper اصلی پنل فعال می‌شود.
   ساختار آن دقیقاً مثل پالت «روشن (سبز/آبی)» است (پس‌زمینه‌ها/متن‌ها/border
   یکسان) و فقط رنگ‌های برند (primary) و منو به ارغوانی تغییر کرده‌اند. */
[data-hex-theme="purple"] {
	/* --- پس‌زمینه‌ها --- */
	--hex-bg-page: #f8fafc;
	--hex-bg-content: #ffffff;
	--hex-bg-card: #ffffff;
	--hex-bg-soft: #f1f5f9;
	--hex-bg-menu: #2e1065;
	--hex-bg-menu-active: #3b1476;
	--hex-bg-header: #ffffff;

	/* --- متن‌ها --- */
	--hex-text-primary: #0f172a;
	--hex-text-heading: #1e293b;
	--hex-text-secondary: #64748b;
	--hex-text-muted: #94a3b8;
	--hex-text-on-primary: #ffffff;
	--hex-text-menu: #b9a4e0;
	--hex-text-menu-active: #ffffff;

	/* --- خطوط و border --- */
	--hex-border: #e2e8f0;
	--hex-border-light: #f1f5f9;
	--hex-border-strong: #cbd5e1;

	/* --- رنگ‌های برند/اصلی --- */
	--hex-primary: #9333ea;
	--hex-primary-rgb: 147, 51, 234;
	--hex-primary-light: #a855f7;
	--hex-primary-dark: #7e22ce;
	--hex-primary-soft: #faf5ff;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	/* --- دکمه‌ها --- */
	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: var(--hex-primary-dark);
	--hex-btn-primary-text: #ffffff;
	--hex-btn-secondary-bg: #f1f5f9;
	--hex-btn-secondary-bg-hover: #e2e8f0;
	--hex-btn-secondary-text: #334155;
	--hex-btn-danger-bg: #dc2626;
	--hex-btn-danger-bg-hover: #b91c1c;
	--hex-btn-danger-text: #ffffff;

	/* --- رنگ‌های وضعیتی --- */
	--hex-color-success: #16a34a;
	--hex-color-success-bg: #ecfdf5;
	--hex-color-success-light: #22c55e;
	--hex-color-warning: #f59e0b;
	--hex-color-warning-bg: #fef3c7;
	--hex-color-warning-light: #fbbf24;
	--hex-color-warning-text: #92400e;
	--hex-color-error: #dc2626;
	--hex-color-error-bg: #fee2e2;
	--hex-color-error-light: #ef4444;
	--hex-color-error-text: #991b1b;
	--hex-color-info: #7c3aed;
	--hex-color-info-bg: #f3effc;
	--hex-color-info-light: #a78bfa;

	/* --- حالت hover برای پس‌زمینه‌های ملایمِ برند (badge/آیکن‌های دایره‌ای) --- */
	--hex-primary-soft-hover: #f3e8ff;
}

/* پالت روشن/صورتی (Pink) — طبق تصمیم بخش «تنظیمات قالب»، این پالت با
   گذاشتن ویژگی data-hex-theme="pink" روی wrapper اصلی پنل فعال می‌شود.
   ساختار آن دقیقاً مثل بقیه‌ی پالت‌های روشن است (پس‌زمینه‌ها/متن‌ها/border
   یکسان) و فقط رنگ‌های برند (primary) و منو به صورتی تغییر کرده‌اند. */
[data-hex-theme="pink"] {
	/* --- پس‌زمینه‌ها --- */
	--hex-bg-page: #f8fafc;
	--hex-bg-content: #ffffff;
	--hex-bg-card: #ffffff;
	--hex-bg-soft: #f1f5f9;
	--hex-bg-menu: #500724;
	--hex-bg-menu-active: #6b0f30;
	--hex-bg-header: #ffffff;

	/* --- متن‌ها --- */
	--hex-text-primary: #0f172a;
	--hex-text-heading: #1e293b;
	--hex-text-secondary: #64748b;
	--hex-text-muted: #94a3b8;
	--hex-text-on-primary: #ffffff;
	--hex-text-menu: #e3a3c1;
	--hex-text-menu-active: #ffffff;

	/* --- خطوط و border --- */
	--hex-border: #e2e8f0;
	--hex-border-light: #f1f5f9;
	--hex-border-strong: #cbd5e1;

	/* --- رنگ‌های برند/اصلی --- */
	--hex-primary: #db2777;
	--hex-primary-rgb: 219, 39, 119;
	--hex-primary-light: #ec4899;
	--hex-primary-dark: #be185d;
	--hex-primary-soft: #fdf2f8;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	/* --- دکمه‌ها --- */
	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: var(--hex-primary-dark);
	--hex-btn-primary-text: #ffffff;
	--hex-btn-secondary-bg: #f1f5f9;
	--hex-btn-secondary-bg-hover: #e2e8f0;
	--hex-btn-secondary-text: #334155;
	--hex-btn-danger-bg: #dc2626;
	--hex-btn-danger-bg-hover: #b91c1c;
	--hex-btn-danger-text: #ffffff;

	/* --- رنگ‌های وضعیتی --- */
	--hex-color-success: #16a34a;
	--hex-color-success-bg: #ecfdf5;
	--hex-color-success-light: #22c55e;
	--hex-color-warning: #f59e0b;
	--hex-color-warning-bg: #fef3c7;
	--hex-color-warning-light: #fbbf24;
	--hex-color-warning-text: #92400e;
	--hex-color-error: #dc2626;
	--hex-color-error-bg: #fee2e2;
	--hex-color-error-light: #ef4444;
	--hex-color-error-text: #991b1b;
	--hex-color-info: #7c3aed;
	--hex-color-info-bg: #f3effc;
	--hex-color-info-light: #a78bfa;

	/* --- حالت hover برای پس‌زمینه‌های ملایمِ برند (badge/آیکن‌های دایره‌ای) --- */
	--hex-primary-soft-hover: #fce7f3;
}

/* پالت روشن/نارنجی (Orange) — طبق تصمیم بخش «تنظیمات قالب»، این پالت با
   گذاشتن ویژگی data-hex-theme="orange" روی wrapper اصلی پنل فعال می‌شود.
   ساختار آن دقیقاً مثل بقیه‌ی پالت‌های روشن است (پس‌زمینه‌ها/متن‌ها/border
   یکسان) و فقط رنگ‌های برند (primary) و منو به نارنجی تغییر کرده‌اند. */
[data-hex-theme="orange"] {
	/* --- پس‌زمینه‌ها --- */
	--hex-bg-page: #f8fafc;
	--hex-bg-content: #ffffff;
	--hex-bg-card: #ffffff;
	--hex-bg-soft: #f1f5f9;
	--hex-bg-menu: #431407;
	--hex-bg-menu-active: #5c1d0a;
	--hex-bg-header: #ffffff;

	/* --- متن‌ها --- */
	--hex-text-primary: #0f172a;
	--hex-text-heading: #1e293b;
	--hex-text-secondary: #64748b;
	--hex-text-muted: #94a3b8;
	--hex-text-on-primary: #ffffff;
	--hex-text-menu: #f0b88f;
	--hex-text-menu-active: #ffffff;

	/* --- خطوط و border --- */
	--hex-border: #e2e8f0;
	--hex-border-light: #f1f5f9;
	--hex-border-strong: #cbd5e1;

	/* --- رنگ‌های برند/اصلی --- */
	--hex-primary: #ea580c;
	--hex-primary-rgb: 234, 88, 12;
	--hex-primary-light: #f97316;
	--hex-primary-dark: #c2410c;
	--hex-primary-soft: #fff7ed;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	/* --- دکمه‌ها --- */
	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: var(--hex-primary-dark);
	--hex-btn-primary-text: #ffffff;
	--hex-btn-secondary-bg: #f1f5f9;
	--hex-btn-secondary-bg-hover: #e2e8f0;
	--hex-btn-secondary-text: #334155;
	--hex-btn-danger-bg: #dc2626;
	--hex-btn-danger-bg-hover: #b91c1c;
	--hex-btn-danger-text: #ffffff;

	/* --- رنگ‌های وضعیتی --- */
	--hex-color-success: #16a34a;
	--hex-color-success-bg: #ecfdf5;
	--hex-color-success-light: #22c55e;
	--hex-color-warning: #f59e0b;
	--hex-color-warning-bg: #fef3c7;
	--hex-color-warning-light: #fbbf24;
	--hex-color-warning-text: #92400e;
	--hex-color-error: #dc2626;
	--hex-color-error-bg: #fee2e2;
	--hex-color-error-light: #ef4444;
	--hex-color-error-text: #991b1b;
	--hex-color-info: #7c3aed;
	--hex-color-info-bg: #f3effc;
	--hex-color-info-light: #a78bfa;

	/* --- حالت hover برای پس‌زمینه‌های ملایمِ برند (badge/آیکن‌های دایره‌ای) --- */
	--hex-primary-soft-hover: #ffedd5;
}

/* پالت روشن/قرمز (Red) — طبق تصمیم بخش «تنظیمات قالب»، این پالت با گذاشتن
   ویژگی data-hex-theme="red" روی wrapper اصلی پنل فعال می‌شود. ساختار آن
   دقیقاً مثل بقیه‌ی پالت‌های روشن است (پس‌زمینه‌ها/متن‌ها/border یکسان) و فقط
   رنگ‌های برند (primary) و منو به قرمز تغییر کرده‌اند.
   نکته: برای رنگ برند از یک قرمزِ گلی/rose (#e11d48) استفاده شده، نه دقیقاً
   همان قرمزِ --hex-color-error/--hex-btn-danger-bg (#dc2626)؛ در غیر این
   صورت دکمه‌های اصلی (primary) با دکمه‌های خطرناک/حذف (danger) که در همه‌ی
   پالت‌ها قرمز ثابت هستند، از نظر رنگ کاملاً یکسان و غیرقابل‌تشخیص می‌شدند. */
[data-hex-theme="red"] {
	/* --- پس‌زمینه‌ها --- */
	--hex-bg-page: #f8fafc;
	--hex-bg-content: #ffffff;
	--hex-bg-card: #ffffff;
	--hex-bg-soft: #f1f5f9;
	--hex-bg-menu: #4c0519;
	--hex-bg-menu-active: #6b0821;
	--hex-bg-header: #ffffff;

	/* --- متن‌ها --- */
	--hex-text-primary: #0f172a;
	--hex-text-heading: #1e293b;
	--hex-text-secondary: #64748b;
	--hex-text-muted: #94a3b8;
	--hex-text-on-primary: #ffffff;
	--hex-text-menu: #f0a8b8;
	--hex-text-menu-active: #ffffff;

	/* --- خطوط و border --- */
	--hex-border: #e2e8f0;
	--hex-border-light: #f1f5f9;
	--hex-border-strong: #cbd5e1;

	/* --- رنگ‌های برند/اصلی --- */
	--hex-primary: #e11d48;
	--hex-primary-rgb: 225, 29, 72;
	--hex-primary-light: #f43f5e;
	--hex-primary-dark: #be123c;
	--hex-primary-soft: #fff1f2;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	/* --- دکمه‌ها --- */
	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: var(--hex-primary-dark);
	--hex-btn-primary-text: #ffffff;
	--hex-btn-secondary-bg: #f1f5f9;
	--hex-btn-secondary-bg-hover: #e2e8f0;
	--hex-btn-secondary-text: #334155;
	--hex-btn-danger-bg: #dc2626;
	--hex-btn-danger-bg-hover: #b91c1c;
	--hex-btn-danger-text: #ffffff;

	/* --- رنگ‌های وضعیتی --- */
	--hex-color-success: #16a34a;
	--hex-color-success-bg: #ecfdf5;
	--hex-color-success-light: #22c55e;
	--hex-color-warning: #f59e0b;
	--hex-color-warning-bg: #fef3c7;
	--hex-color-warning-light: #fbbf24;
	--hex-color-warning-text: #92400e;
	--hex-color-error: #dc2626;
	--hex-color-error-bg: #fee2e2;
	--hex-color-error-light: #ef4444;
	--hex-color-error-text: #991b1b;
	--hex-color-info: #7c3aed;
	--hex-color-info-bg: #f3effc;
	--hex-color-info-light: #a78bfa;

	/* --- حالت hover برای پس‌زمینه‌های ملایمِ برند (badge/آیکن‌های دایره‌ای) --- */
	--hex-primary-soft-hover: #ffe4e6;
}

/* پالت تیره (Dark) — طبق تصمیم بخش «تنظیمات قالب»، این پالت با گذاشتن
   ویژگی data-hex-theme="dark" روی wrapper اصلی پنل فعال می‌شود (فاز ۲ و ۳). */
[data-hex-theme="dark"] {
	/* --- پس‌زمینه‌ها --- */
	--hex-bg-page: #0f172a;
	--hex-bg-content: #1e293b;
	--hex-bg-card: #1e293b;
	--hex-bg-soft: #263449;
	--hex-bg-menu: #0b1220;
	--hex-bg-menu-active: #16233a;
	--hex-bg-header: #1e293b;

	/* --- متن‌ها --- */
	--hex-text-primary: #f1f5f9;
	--hex-text-heading: #f8fafc;
	--hex-text-secondary: #cbd5e1;
	--hex-text-muted: #94a3b8;
	--hex-text-on-primary: #ffffff;
	--hex-text-menu: #94a3b8;
	--hex-text-menu-active: #ffffff;

	/* --- خطوط و border --- */
	--hex-border: #334155;
	--hex-border-light: #293548;
	--hex-border-strong: #475569;

	/* --- رنگ‌های برند/اصلی --- */
	--hex-primary: #1abc9c;
	--hex-primary-rgb: 26, 188, 156;
	--hex-primary-light: #2dd4bf;
	--hex-primary-dark: #0f766e;
	--hex-primary-soft: #0f2f2b;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	/* --- دکمه‌ها --- */
	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: #14b8a6;
	--hex-btn-primary-text: #ffffff;
	--hex-btn-secondary-bg: #263449;
	--hex-btn-secondary-bg-hover: #334155;
	--hex-btn-secondary-text: #e2e8f0;
	--hex-btn-danger-bg: #ef4444;
	--hex-btn-danger-bg-hover: #dc2626;
	--hex-btn-danger-text: #ffffff;

	/* --- رنگ‌های وضعیتی --- */
	--hex-color-success: #4ade80;
	--hex-color-success-bg: #14301f;
	--hex-color-success-light: #86efac;
	--hex-color-warning: #fbbf24;
	--hex-color-warning-bg: #3a2a0d;
	--hex-color-warning-light: #fde68a;
	--hex-color-warning-text: #fde68a;
	--hex-color-error: #f87171;
	--hex-color-error-bg: #3a1414;
	--hex-color-error-light: #fca5a5;
	--hex-color-error-text: #fca5a5;
	--hex-color-info: #a78bfa;
	--hex-color-info-bg: #241a3a;
	--hex-color-info-light: #c4b5fd;

	/* --- حالت hover برای پس‌زمینه‌های ملایمِ برند (badge/آیکن‌های دایره‌ای) --- */
	--hex-primary-soft-hover: #1c3f3a;

	/* --- بخش «آمار» صفحه اصلی: چون در پالت تیره خودِ صفحه هم تیره است، اینجا
	   برعکسِ حالت روشن عمل می‌شود تا باکس همچنان برجسته/متمایز بماند: پس‌زمینه‌ی
	   باکس رنگی (بر پایه‌ی رنگ برند همین پالت) و کارت‌های داخلش سفید می‌شوند. */
	--hex-stats-bg: var(--hex-gradient-primary);
	--hex-stats-card-bg: #ffffff;
	--hex-stats-card-border: rgba(15, 23, 42, 0.08);
	--hex-stats-heading: #0f172a;
	--hex-stats-label: #64748b;
}

/* پالت تیره + برند «آبی» — وقتی کاربر پیش از رفتن به حالت تیره، پالت
   «روشن (آبی)» را انتخاب کرده باشد، ویژگی data-hex-accent="blue" هم
   کنار data-hex-theme="dark" روی wrapper اصلی پنل قرار می‌گیرد (نک.
   get_current_theme_accent_id_for_user در PHP). این بلاک فقط توکن‌های
   رنگیِ «برند» (primary و مشتقات آن) را بازنویسی می‌کند تا به‌جای سبزِ
   پیش‌فرض پالت تیره، همان آبیِ پالت روشنِ قبلی کاربر روی دکمه‌ها/لینک‌ها/
   تاکیدها دیده شود؛ پس‌زمینه‌ها، متن‌ها، border و رنگ‌های وضعیتی (موفقیت/
   خطا/هشدار) دقیقاً همان مقادیر پالت تیره‌ی معمولی باقی می‌مانند. */
[data-hex-theme="dark"][data-hex-accent="blue"] {
	--hex-primary: #3b82f6;
	--hex-primary-rgb: 59, 130, 246;
	--hex-primary-light: #60a5fa;
	--hex-primary-dark: #1d4ed8;
	--hex-primary-soft: #16233f;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: #5b93f7;

	--hex-primary-soft-hover: #1c2f52;
}

/* پالت تیره + برند «ارغوانی» — همان قاعده‌ی بالا، برای کاربری که پیش از
   رفتن به حالت تیره، پالت «روشن (ارغوانی)» را انتخاب کرده بود. */
[data-hex-theme="dark"][data-hex-accent="purple"] {
	--hex-primary: #a855f7;
	--hex-primary-rgb: 168, 85, 247;
	--hex-primary-light: #c084fc;
	--hex-primary-dark: #7e22ce;
	--hex-primary-soft: #241b40;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: #b98cf7;

	--hex-primary-soft-hover: #2f2354;
}

/* پالت تیره + برند «صورتی» — همان قاعده‌ی بالا، برای کاربری که پیش از
   رفتن به حالت تیره، پالت «روشن (صورتی)» را انتخاب کرده بود. */
[data-hex-theme="dark"][data-hex-accent="pink"] {
	--hex-primary: #ec4899;
	--hex-primary-rgb: 236, 72, 153;
	--hex-primary-light: #f472b6;
	--hex-primary-dark: #be185d;
	--hex-primary-soft: #3b0a24;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: #f68fc0;

	--hex-primary-soft-hover: #4a0f2e;
}

/* پالت تیره + برند «نارنجی» — همان قاعده‌ی بالا، برای کاربری که پیش از
   رفتن به حالت تیره، پالت «روشن (نارنجی)» را انتخاب کرده بود. */
[data-hex-theme="dark"][data-hex-accent="orange"] {
	--hex-primary: #f97316;
	--hex-primary-rgb: 249, 115, 22;
	--hex-primary-light: #fb923c;
	--hex-primary-dark: #c2410c;
	--hex-primary-soft: #3d1a0a;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: #fb9d55;

	--hex-primary-soft-hover: #4a220d;
}

/* پالت تیره + برند «قرمز» — همان قاعده‌ی بالا، برای کاربری که پیش از رفتن
   به حالت تیره، پالت «روشن (قرمز)» را انتخاب کرده بود. */
[data-hex-theme="dark"][data-hex-accent="red"] {
	--hex-primary: #f43f5e;
	--hex-primary-rgb: 244, 63, 94;
	--hex-primary-light: #fb7185;
	--hex-primary-dark: #be123c;
	--hex-primary-soft: #3d0d17;
	--hex-gradient-primary: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);

	--hex-btn-primary-bg: var(--hex-primary);
	--hex-btn-primary-bg-hover: #fb93a3;

	--hex-primary-soft-hover: #4d1220;
}

/* ======================================================================
   فاز ۲۱ — بازبینی نهایی: مستندسازی رنگ‌های عمداً ثابت (Hardcoded)
   (تکمیل‌شده در نسخه‌ی ۳.۴۷.۰)
   ======================================================================
   در بازبینی سراسری این فاز، هر hex رنگی که در بقیه‌ی فایل معادل دقیق یکی
   از توکن‌های بالا بود یا نقش ساختاری (پس‌زمینه/متنِ صفحه، حالت hover تکرار
   شونده، توقفِ روشنِ گرادیان وضعیت‌ها) داشت، به توکن مربوطه منتقل شد (از
   جمله دکمه‌های وضعیت حضور/غیاب/تأخیر که طبق یادداشت جا مانده از فاز ۹).

   رنگ‌های زیر، برخلاف بقیه، آگاهانه hardcode باقی مانده‌اند چون بخشی از یک
   سیستم رنگی تزئینی/شناسه‌ای هستند که قرار نیست با تغییر پالت روشن/تیره
   عوض شوند (دقیقاً مشابه رنگ نمودارها که معمولاً ثابت می‌مانند):

   ۱) رنگ هویتی کارت‌های آماری داشبورد و لیست‌های «برترین‌ها» — هر نوع
      موجودیت یک رنگ ثابت دارد تا در کل پنل قابل تشخیص باشد:
      دانش‌آموزان=#0d9488 (فیروزه‌ای)، کلاس‌ها=#ea580c (نارنجی)،
      والدین=#059669 (سبز زمردی). («معلمان» چون دقیقاً برابر
      --hex-color-info بود، به var() تبدیل شد.)
   ۲) پالت ۸ رنگیِ دکمه‌های میان‌بر داشبورد (خطوط ~9403-9455؛
      nth-child(8n+1) تا 8n+8) — تنوع رنگی تزئینی و صرفاً بصری.
   ۳) توقف‌های اضافیِ گرادیان «هیرو»ی داشبورد — #12876f، #0e6b58 — سایه‌های
      تکمیلیِ برند برای جلوه‌ی گرادیان چندرنگ؛ توقف‌های اصلی به
      var(--hex-primary) و var(--hex-primary-light) منتقل شدند. (بنر هیرو،
      آیکن‌ها، حلقه‌ی دور عکس موسس و فیلد «سمت» در بخش «معرفی مدرسه» در
      نسخه‌ی ۳.۶۰.۲۶ کاملاً به توکن‌های پالت متصل شدند و از این قاعده
      مستثنی‌اند.)
   ۴) رنگ‌های نشان مدال رتبه ۲ و ۳ (نقره‌ای/برنزی) در «برترین‌ها»ی داشبورد
      (rank-2: #cbd5e1/#94a3b8 ، rank-3: #d97706) — هویت بصری مدال، نه
      وضعیت. (رتبه‌ی طلایی چون دقیقاً برابر توکن‌های warning بود، کامل به
      var() تبدیل شد.)
   ۵) جعبه‌های آبی/بنفش/نارنجیِ اختصاصیِ هر بخش (شهریه، قرآن، مهارت‌ها،
      انضباطی، نظرسنجی، ثبت‌نام، دکمه‌های عملیاتیِ دایره‌ای view/edit/
      timetable) — هر بخش برای تمایز بصری یک شناسه‌رنگ ملایم/اشباع مختص
      خودش دارد که مستقل از پالت روشن/تیره است.
   ۶) حلقه‌های سفیدِ تزئینی (border سفید دور آواتار/پیش‌نمایش عکس، تیک
      چک‌باکس، بخش سفید اسپینر بارگذاری) — این‌ها المان‌های کوچک روی
      پس‌زمینه‌ی رنگی برند هستند و صرف‌نظر از پالت باید سفید بمانند.

   اگر تصمیم گرفتید هرکدام از موارد بالا هم رنگ‌محور (theme-aware) شوند،
   کافی است در فاز جدیدی توکن‌های اختصاصی برایشان تعریف شود؛ عمداً این کار
   الان انجام نشد تا هویت بصریِ ثابتِ هر بخش حفظ شود. */

/**
 * جلوگیری از اسکرول افقی جزئی صفحه: تکنیک «تمام‌عرض شدن پنل» در بالا از
 * `100vw` استفاده می‌کند که عرض اسکرول‌بار عمودی را هم حساب می‌کند، ولی
 * درصد (%) این‌طور نیست؛ در نتیجه هر وقت صفحه اسکرول عمودی داشته باشد (مثلاً
 * به‌خاطر افزوده شدن ردیف جدید دکمه‌های میان‌بر هدر)، همین اختلاف چند پیکسلی
 * باعث می‌شود پنل کمی از لبه‌ی چپ صفحه بیرون بزند و یک اسکرول افقی جزئی هم
 * ایجاد شود. این قانون آن اسکرول افقی ناخواسته را مهار می‌کند، بدون این‌که
 * به تکنیک تمام‌عرض شدن پنل (بالا) دست بزند.
 */
html {
	overflow-x: hidden;
}

/**
 * صفحه‌ای که شورت‌کد [hex_school_panel] در آن قرار دارد (کلاس body از طریق
 * فیلتر body_class در PHP اضافه می‌شود، نک. add_panel_body_class): padding/
 * margin عمودی wrapperهای رایج قالب/صفحه‌ساز (site-content قالب، سکشن/
 * ستون/ویجت المنتور، و متغیر root padding قالب‌های بلوکی وردپرس) صفر
 * می‌شود. این‌ها همان چیزهایی بودند که با اینکه تکنیک تمام‌عرض‌شدن پنل
 * (بالا، مبتنی بر 100vw) عرض را درست می‌کرد، فضای سفید کوچک بالا/پایین
 * پنل و در نتیجه‌ی آن یک اسکرول جزئیِ کل صفحه (نه فقط ناحیه‌ی محتوا)
 * ایجاد می‌کردند. چون این reset فقط زیر body.hex-school-panel-page اعمال
 * می‌شود، به بقیه‌ی صفحات سایت (از جمله صفحه‌ی اصلی [hex_school_homepage]
 * که ساختار جدا و درستی دارد) کاری ندارد.
 */
body.hex-school-panel-page {
	margin: 0 !important;
	padding: 0 !important;
	--wp--style--root--padding-top: 0px !important;
	--wp--style--root--padding-bottom: 0px !important;
}

body.hex-school-panel-page #page,
body.hex-school-panel-page #content,
body.hex-school-panel-page #main,
body.hex-school-panel-page #primary,
body.hex-school-panel-page .site,
body.hex-school-panel-page .site-content,
body.hex-school-panel-page .site-main,
body.hex-school-panel-page .content-area,
body.hex-school-panel-page .ast-container,
body.hex-school-panel-page main,
body.hex-school-panel-page article,
body.hex-school-panel-page .entry-content,
body.hex-school-panel-page .page-content,
body.hex-school-panel-page .elementor,
body.hex-school-panel-page .elementor-section-wrap,
body.hex-school-panel-page .elementor-top-section,
body.hex-school-panel-page .elementor-container,
body.hex-school-panel-page .elementor-row,
body.hex-school-panel-page .elementor-column,
body.hex-school-panel-page .elementor-widget-wrap,
body.hex-school-panel-page .elementor-widget-shortcode,
body.hex-school-panel-page .elementor-widget-container,
body.hex-school-panel-page .e-con,
body.hex-school-panel-page .e-con-inner,
body.hex-school-panel-page .e-parent {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.hex-school-frontend-panel {
	direction: rtl;
	text-align: right;
	background: var(--hex-bg-content);
	font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
	display: flex;
	flex-direction: column;
	/* خروج از محدودیت عرض ستون محتوای قالب سایت، تا پنل کل عرض صفحه را بگیرد
	   و منوی سمت راست دقیقاً به لبه‌ی راست صفحه بچسبد (فاز 17). */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( -50vw + 50% );
	margin-right: calc( -50vw + 50% );
	min-height: 100vh;
	min-height: 100dvh;
}

/* هدر و منوی اصلی کلاً ثابت بمانند و اسکرول نشوند: کل پنل دقیقاً به اندازه‌ی
   ارتفاع صفحه‌نمایش (100vh) محدود می‌شود و خودش اسکرول نمی‌کند؛ فقط ناحیه‌ی
   محتوا (hex-school-view) و در صورت لزوم خودِ منو (hex-school-nav) اسکرول
   داخلی جداگانه دارند (فاز 18). این محدودسازی فقط برای پنل اصلی (کاربر
   واردشده) است، نه صفحه‌ی ورود/عدم دسترسی که ساختار متفاوتی دارد.

   نکته‌ی مهم موبایل: واحد 100vh در کروم موبایل بر اساس بزرگ‌ترین حالت ممکن
   صفحه (یعنی طوری که انگار نوار آدرس مرورگر اصلاً نمایش داده نشده) محاسبه
   می‌شود، در حالی که ارتفاع واقعی قابل‌مشاهده وقتی نوار آدرس باز است کمتر از
   این مقدار است. همین اختلاف چند ده‌پیکسلی باعث می‌شد کل صفحه (نه فقط ناحیه‌ی
   محتوا) کمی قابل اسکرول باشد و همان اسکرول جزئی صفحه، نوار آدرس کروم را
   جمع/باز می‌کرد. با استفاده از 100dvh (که خودش را با ارتفاع واقعی و در حال
   تغییر viewport هماهنگ می‌کند) این اختلاف از بین می‌رود و صفحه اصلاً اسکرول
   نمی‌شود، در نتیجه نوار آدرس مرورگر دیگر تغییر حالت نمی‌دهد. 100vh به عنوان
   fallback برای مرورگرهای قدیمی‌تر که 100dvh را نمی‌شناسند نگه داشته شده است. */
.hex-school-frontend-panel:not(.hex-school-guest):not(.hex-school-no-access) {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

/* وقتی نوار مدیریت وردپرس (admin bar) بالای صفحه نمایش داده می‌شود، ارتفاع
   همان نوار (۳۲px در دسکتاپ و ۴۶px در موبایل) به ارتفاع واقعی صفحه اضافه
   می‌شود؛ اما پنل همچنان دقیقاً برابر 100vh/100dvh بود، یعنی جمعِ
   (نوار ادمین + پنل) از ارتفاع واقعی صفحه بیشتر می‌شد و همین اختلاف
   چندده‌پیکسلی باعث می‌شد کل صفحه (نه فقط ناحیه‌ی محتوا) یک اسکرول عمودی
   جزئی و بی‌فایده پیدا کند که پایین آن صرفاً فضای خالی/سفید بود. اینجا
   ارتفاع پنل دقیقاً به اندازه‌ی فضای باقی‌مانده زیر نوار ادمین محدود
   می‌شود تا کل صفحه اصلاً اسکرول نخورد. */
body.admin-bar .hex-school-frontend-panel:not(.hex-school-guest):not(.hex-school-no-access) {
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar .hex-school-frontend-panel:not(.hex-school-guest):not(.hex-school-no-access) {
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
	}
}

.hex-school-frontend-panel.hex-school-no-access {
	padding: 20px;
	text-align: center;
	color: var(--hex-primary);
	background: var(--hex-bg-page);
}

/* صفحه‌ی ورود: کارت وسط‌چین در تمام ارتفاع نمایشگر، روی پس‌زمینه‌ی گرادیانی ملایم */
.hex-school-frontend-panel.hex-school-guest {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: radial-gradient(circle at 15% 15%, var(--hex-primary-soft) 0%, var(--hex-bg-page) 45%, var(--hex-bg-soft) 100%);
}

/* شکل‌های محو و متحرک پس‌زمینه‌ی صفحه‌ی ورود؛ فقط جنبه‌ی تزئینی دارند (aria-hidden)
و به‌آرامی و بی‌پایان شناور می‌شوند تا پس‌زمینه بی‌روح به نظر نرسد. */
.hex-school-login-blob {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
	pointer-events: none;
}

.hex-school-login-blob-1 {
	top: -90px;
	right: -90px;
	width: 340px;
	height: 340px;
	background: radial-gradient(circle, var(--hex-primary-light) 0%, rgba(26, 188, 156, 0) 70%);
	animation: hexLoginBlobFloat1 18s ease-in-out infinite;
}

.hex-school-login-blob-2 {
	bottom: -110px;
	left: -90px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, var(--hex-primary) 0%, rgba(22, 160, 133, 0) 70%);
	animation: hexLoginBlobFloat2 22s ease-in-out infinite;
}

.hex-school-login-blob-3 {
	top: 45%;
	left: 50%;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, #6ee7b7 0%, rgba(110, 231, 183, 0) 70%);
	animation: hexLoginBlobFloat3 26s ease-in-out infinite;
}

@keyframes hexLoginBlobFloat1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-30px, 40px) scale(1.1); }
}

@keyframes hexLoginBlobFloat2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(40px, -30px) scale(1.05); }
}

@keyframes hexLoginBlobFloat3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -60%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
	.hex-school-login-blob {
		animation: none;
	}
}

/* دایره و شش‌ضلعی تزئینی پس‌زمینه‌ی صفحه‌ی ورود؛ برخلاف blobها بدون بلور
هستند اما به‌صورت توپر (fill) با رنگ کم‌رنگ (opacity پایین) نمایش داده می‌شوند. */
.hex-school-login-shape {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.hex-school-login-shape-circle {
	top: 6%;
	left: -4%;
	width: 320px;
	height: 320px;
	background: rgba(255, 149, 66, 0.2);
	border-radius: 50%;
	animation: hexLoginShapeDrop 10s ease-in-out infinite;
}

.hex-school-login-shape-hexagon {
	bottom: 2%;
	right: -6%;
	width: 380px;
	height: 380px;
	fill: rgba(26, 188, 156, 0.2);
	stroke: none;
	animation: hexLoginShapeSpin 60s linear infinite;
}

@media (max-width: 600px) {
	.hex-school-login-shape-circle {
		width: 220px;
		height: 220px;
	}

	.hex-school-login-shape-hexagon {
		width: 260px;
		height: 260px;
	}
}

@keyframes hexLoginShapeFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-18px); }
}

@keyframes hexLoginShapeDrop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(220px); }
}

@keyframes hexLoginShapeSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hex-school-login-shape {
		animation: none;
	}
}

/* بدنه اصلی پنل: منو در سمت راست (چسبیده از بالا تا پایین) و محتوا در سمت چپ.
   ارتفاع این ردیف دقیقاً باقی‌مانده‌ی ارتفاع پنل بعد از هدر است (فاز 18)،
   و خودش اسکرول نمی‌شود؛ فرزندانش (منو و محتوا) هرکدام مستقل اسکرول می‌شوند. */
.hex-school-layout {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-height: 0;
	max-width: 100%;
	overflow: hidden;
}

.hex-school-nav {
	background: var(--hex-bg-menu);
	flex: 0 0 260px;
	width: 260px;
	height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.hex-school-nav > ul {
	flex: 1 1 auto;
}

/* نوار اسکرول عمودی منو و بخش محتوا: نسخه‌ی مدرن و باریک، فقط در دسکتاپ
   (در موبایل منو به‌صورت کشویی است و ظاهر اسکرول‌بار پیش‌فرض سیستم‌عامل
   اهمیتی ندارد، پس این استایل با همان بریک‌پوینت 782px پنل هم‌راستا شده). */
@media (min-width: 783px) {
	/* در دسکتاپ، صرف‌نظر از اینکه ارتفاع کل صفحه (به هر دلیلی، مثلاً قالب
	   سایت یا نمایشگر کوچک) از یک نمای‌پورت بیشتر شود یا نه، منوی کناری با
	   position: sticky همیشه به بالای نمای‌پورت می‌چسبد و ارتفاعش دقیقاً به
	   اندازه‌ی ارتفاع قابل‌مشاهده محدود می‌شود (max-height). اگر مجموع
	   آیتم‌های منو از این فضا بیشتر شود، فقط خودِ منو اسکرول داخلی پیدا
	   می‌کند و کل صفحه اسکرول نمی‌خورد. align-self: flex-start لازم است
	   چون در حالت عادی align-items: stretch روی والد (.hex-school-layout)
	   منو را به اندازه‌ی ارتفاع والد می‌کِشد و مانع از عملکرد sticky/
	   max-height می‌شود. */
	.hex-school-nav {
		position: sticky;
		top: 0;
		align-self: flex-start;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
	}

	body.admin-bar .hex-school-nav {
		top: 32px;
		height: calc(100vh - 32px);
		height: calc(100dvh - 32px);
		max-height: calc(100vh - 32px);
		max-height: calc(100dvh - 32px);
	}

	.hex-school-nav,
	.hex-school-view {
		scrollbar-width: thin;
	}

	.hex-school-nav {
		scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
	}

	.hex-school-view {
		scrollbar-color: var(--hex-border-strong) transparent;
	}

	.hex-school-nav::-webkit-scrollbar,
	.hex-school-view::-webkit-scrollbar {
		width: 6px;
	}

	.hex-school-nav::-webkit-scrollbar-track,
	.hex-school-view::-webkit-scrollbar-track {
		background: transparent;
	}

	.hex-school-nav::-webkit-scrollbar-thumb {
		background-color: rgba(255, 255, 255, 0.18);
		border-radius: 999px;
	}

	.hex-school-nav::-webkit-scrollbar-thumb:hover {
		background-color: rgba(255, 255, 255, 0.32);
	}

	.hex-school-view::-webkit-scrollbar-thumb {
		background-color: var(--hex-border-strong);
		border-radius: 999px;
	}

	.hex-school-view::-webkit-scrollbar-thumb:hover {
		background-color: var(--hex-text-menu);
	}
}

/* بلوک ثابت بالای منوی اصلی: آیکن و نام مدرسه + خط جداکننده زیرش.
   با position: sticky همیشه بالای نوار کناری می‌ماند و هنگام اسکرول منو،
   آیتم‌ها از زیر آن رد می‌شوند و پشت پس‌زمینه‌اش پنهان می‌شوند، نه روی آن. */
.hex-school-nav-brand {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	background: var(--hex-bg-menu);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	flex: 0 0 auto;
}

.hex-school-nav-brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--hex-primary-light);
	overflow: hidden;
}

.hex-school-nav-brand-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hex-school-nav-brand-icon svg {
	width: 20px;
	height: 20px;
}

.hex-school-nav-brand-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.hex-school-nav-brand-name {
	color: var(--hex-text-menu-active);
	font-size: 15px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-school-nav-credit {
	display: block;
	color: rgba(229, 233, 240, 0.45);
	font-size: 9px !important;
	line-height: 1.4;
	text-decoration: none !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-school-nav-credit,
.hex-school-nav-credit:hover,
.hex-school-nav-credit:focus,
.hex-school-nav-credit:visited {
	text-decoration: none !important;
}

.hex-school-nav-credit-brand {
	color: #4a9eff;
}

.hex-school-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.hex-school-nav li {
	margin: 0;
}

.hex-school-nav a:not(.hex-school-nav-credit) {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	margin: 5px;
	color: var(--hex-text-menu);
	text-decoration: none;
	font-size: 14px;
	border-right: 3px solid transparent;
	border-radius: 7px;
	background: none;
	transition: color 0.2s ease;
}

.hex-school-nav a svg {
	flex-shrink: 0;
	color: var(--hex-text-menu);
}

.hex-school-nav a span:not(.hex-school-nav-badge) {
	flex: 1 1 auto;
}

.hex-school-nav a:hover svg,
.hex-school-nav li.is-active > .hex-school-nav-item-row a svg {
	color: var(--hex-text-menu-active);
}

.hex-school-nav a:not(.hex-school-nav-credit):hover {
	color: var(--hex-text-menu-active);
	background-image: linear-gradient(90deg, var(--hex-primary-light), var(--hex-primary), var(--hex-primary-dark), var(--hex-primary), var(--hex-primary-light));
	background-size: 300% 100%;
	background-repeat: no-repeat;
	animation: hexNavGradientMove 3s linear infinite;
}

@keyframes hexNavGradientMove {
	0% {
		background-position: 0% 0;
	}
	100% {
		background-position: 300% 0;
	}
}

.hex-school-nav li.is-active > .hex-school-nav-item-row a {
	background-image: none;
	background: var(--hex-bg-menu-active);
	font-weight: bold;
	border-right-color: var(--hex-text-menu-active);
}

/* ردیف هر آیتم منو که زیرمنو دارد (فقط «تنظیمات»): یک دکمه‌ی +/- جداگانه
   برای باز/بسته کردن زیرمنو، جلوی عنوان آیتم؛ کلیک روی خودِ عنوان هم‌چنان
   به تب اول زیرمنو می‌رود و با کلیک روی دکمه +/- تداخل ندارد. */
.hex-school-nav-item-row {
	display: flex;
	align-items: stretch;
}

.hex-school-nav-item-row a {
	flex: 1 1 auto;
	min-width: 0;
}

.hex-school-nav-toggle {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	cursor: pointer;
	padding: 0;
	color: var(--hex-text-menu);
	font-size: 20px;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
}

.hex-school-nav-toggle::before {
	content: '+';
	display: inline-block;
}

.hex-school-nav-toggle[aria-expanded="true"]::before {
	content: '\2212'; /* − */
}

.hex-school-nav-toggle,
.hex-school-nav-toggle:hover,
.hex-school-nav-toggle:focus,
.hex-school-nav-toggle:focus-visible,
.hex-school-nav-toggle:active,
.hex-school-nav-toggle[aria-expanded="true"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none;
	background-color: transparent;
	background-image: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	color: var(--hex-text-menu);
}

/* زیرمنوی تب‌های «تنظیمات»: همیشه به‌طور پیش‌فرض جمع‌شده (ارتفاع صفر) است؛
   فقط با کلیک روی دکمه +/- (که کلاس is-open را روی <li> اضافه/حذف می‌کند)
   باز یا بسته می‌شود، مستقل از این‌که در حال حاضر کدام تب فعال است. */
.hex-school-nav-submenu {
	position: relative;
	list-style: none;
	margin: 0;
	margin-right: 36px;
	padding: 0;
	background: rgba(0, 0, 0, 0.28);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

/* خط عمودیِ زیرمنو: با فاصله 10px از لبه راست، از اولین آیتم تا آخرین آیتم کشیده می‌شود */
.hex-school-nav-submenu::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	width: 1px;
	background: rgba(49, 57, 70, 0.5);
	pointer-events: none;
	z-index: 0;
}

/* این مقدار عمداً خیلی بزرگ‌تر از ارتفاع واقعی زیرمنو (حتی با ۱۳ آیتم و بلندترین
   line-height ممکن) انتخاب شده تا در تم‌ها/فونت‌های مختلف، آخرین آیتم (مثلاً
   «اپلیکیشن (PWA)») هرگز به‌خاطر کوتاه بودن max-height بریده/مخفی نشود. عدد قبلی
   (600px) برای ۱۲ آیتم تنظیم شده بود و با اضافه شدن آیتم سیزدهم در برخی
   تم‌ها ناکافی بود. */
.hex-school-nav-has-children.is-open .hex-school-nav-submenu {
	max-height: 2000px;
}

.hex-school-nav-submenu li {
	position: relative;
}

/* شاخه‌ی افقی کوچک که هر آیتم زیرمنو را به خط عمودی وصل می‌کند */
.hex-school-nav-submenu li::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height: 1px;
	background: rgba(49, 57, 70, 0.5);
	pointer-events: none;
	z-index: 0;
	transition: background 0.2s ease;
}

.hex-school-nav-submenu li.is-active::before,
.hex-school-nav-submenu li:hover::before {
	background: var(--hex-primary-light);
}

.hex-school-nav-submenu a {
	position: relative;
	z-index: 1;
	padding: 10px 18px;
	padding-right: 26px;
	font-size: 13px;
	border-right: 3px solid transparent;
	margin: 5px 20px 5px 5px;
	border-radius: 7px;
	background: none;
	transition: color 0.2s ease;
}

/* هاور و حالت انتخاب در زیرمنو: از همان نقطه‌ای که خط افقی تمام می‌شود شروع می‌شود
   (بدون فاصله و بدون رویهم‌افتادن با خط)، تا شکل «ادامه‌ی خط» حفظ شود. */
.hex-school-nav-submenu a:hover {
	color: var(--hex-text-menu-active);
	background-image: linear-gradient(90deg, var(--hex-primary-light), var(--hex-primary), var(--hex-primary-dark), var(--hex-primary), var(--hex-primary-light));
	background-size: 300% 100%;
	background-repeat: no-repeat;
	animation: hexNavGradientMove 3s linear infinite;
}

.hex-school-nav-submenu li.is-active a {
	background-image: none;
	background: rgba(255, 255, 255, 0.12);
	font-weight: bold;
	border-right-color: var(--hex-primary-light);
	color: var(--hex-text-menu-active);
}

/* بخش پایینی نوار کناری: عکس/نام کاربر و منوی کشویی‌اش، دقیقاً مثل نوار
   بالای پنل - با یک خط جداکننده از بقیه‌ی آیتم‌های منو. با position: sticky
   همیشه به کف نوار کناری چسبیده باقی می‌ماند، حتی وقتی آیتم‌های منو از آن
   نوار بلندتر باشند و نیاز به اسکرول داخلی پیدا کنند. */
.hex-school-nav-footer {
	position: sticky;
	bottom: 0;
	margin-top: auto;
	padding: 10px;
	background: var(--hex-bg-menu);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	z-index: 5;
}

.hex-school-nav-footer .hex-school-current-user {
	width: 100%;
	max-width: 100%;
	color: var(--hex-text-menu-active);
	box-sizing: border-box;
}

.hex-school-nav-footer .hex-school-current-user span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-school-current-user-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	flex: 1 1 auto;
}

.hex-school-current-user-name {
	font-weight: bold;
}

.hex-school-current-user-role {
	font-size: 11px;
	font-weight: normal;
	opacity: 0.65;
}

.hex-school-nav-footer .hex-school-current-user:hover,
.hex-school-nav-footer .hex-school-current-user[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.1);
}

.hex-school-nav-footer .hex-school-user-menu-caret {
	width: 3px;
	height: 3px;
	border: 0;
	border-radius: 50%;
	background: var(--hex-text-menu-active);
	box-shadow: 0 -6px 0 var(--hex-text-menu-active), 0 6px 0 var(--hex-text-menu-active);
	margin-inline-start: 6px;
}

.hex-school-nav-footer .hex-school-current-user[aria-expanded="true"] .hex-school-user-menu-caret {
	transform: none;
}

/* منوی کشویی این نمونه چون پایین‌ترین بخش نوار کناری است، به‌جای پایین دکمه،
   بالای آن باز می‌شود تا همیشه در دید کاربر بماند. */
.hex-school-nav-footer .hex-school-user-menu {
	top: auto;
	bottom: calc( 100% + 8px );
	right: 0;
	left: 0;
	background: rgba(26, 35, 50, 0.65);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.hex-school-nav-footer .hex-school-user-menu a,
.hex-school-nav-footer .hex-school-user-menu .hex-school-btn-link {
	color: var(--hex-text-menu-active);
}

.hex-school-nav-footer .hex-school-user-menu a svg {
	color: var(--hex-text-menu);
}

.hex-school-nav-footer .hex-school-user-menu a:hover,
.hex-school-nav-footer .hex-school-user-menu .hex-school-btn-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--hex-text-menu-active);
}

.hex-school-nav-footer .hex-school-user-menu a:hover svg {
	color: var(--hex-text-menu-active);
}

.hex-school-nav-footer .hex-school-user-menu-logout {
	border-top-color: rgba(255, 255, 255, 0.14);
}

.hex-school-view {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 24px;
	color: var(--hex-text-primary);
	background: var(--hex-bg-page);
	transition: opacity 0.12s ease;
}

/* فاز ۲ - ایجکسی‌شدن منو: حین بارگذاری نمای جدید (بدون رفرش صفحه)، محتوای
   فعلی کمی محو و غیرقابل‌کلیک می‌شود تا کاربر متوجه در-حال-بارگذاری بودن شود،
   بدون افت سرعت درک‌شده (بدون اسپینر تمام‌صفحه). آیتم‌های منو هم موقتاً
   غیرقابل‌کلیک می‌شوند تا از ارسال چند درخواست هم‌زمان با کلیک‌های پیاپی
   جلوگیری شود. */
.hex-school-frontend-panel.hex-school-view-loading .hex-school-view {
	opacity: 0.45;
	pointer-events: none;
}

.hex-school-frontend-panel.hex-school-view-loading #hex-school-nav > ul {
	opacity: 0.65;
	pointer-events: none;
}

/* فاز ۷ - لودینگ جذاب وسط صفحه حین بارگذاری Ajax یک نما: یک نشان گرد شناور
   با دو حلقه‌ی متحرک هم‌مرکز (رنگ برند، سرعت/جهت متفاوت برای جلوه‌ی پویاتر)
   وسط صفحه ظاهر می‌شود؛ مکمل تیره‌شدن ملایم محتوای فعلی که از قبل با کلاس
   hex-school-view-loading انجام می‌شود. */
.hex-school-view-loader-overlay {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease;
}

.hex-school-view-loader-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

.hex-school-view-loader-badge {
	position: relative;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--hex-bg-card);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hex-school-view-loader-ring {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: var(--hex-primary-light);
	border-right-color: var(--hex-primary-light);
	animation: hex-school-spin 0.9s linear infinite;
}

.hex-school-view-loader-ring-2 {
	width: 25px;
	height: 25px;
	border-top-color: var(--hex-primary);
	border-left-color: var(--hex-primary);
	border-right-color: transparent;
	animation-duration: 1.3s;
	animation-direction: reverse;
}

/* فاز ۶ - کارت خطای بارگذاری نما (اتصال اینترنت ضعیف/قطع یا timeout): همان
   الگوی روکش تمام‌صفحه‌ی مودال‌های دیگر افزونه (نک. hex-discipline-modal-overlay)
   با یک کارت مرکزی و دکمه‌ی «تلاش مجدد». محتوای نمای قبلی زیر این روکش
   دست‌نخورده باقی می‌ماند تا با کلیک روی دکمه (رفرش کامل صفحه) یا برطرف‌شدن
   مشکل اتصال، به حالت عادی برگردد. */
.hex-school-view-error-overlay {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-school-view-error-card {
	background: var(--hex-bg-card);
	border-radius: 14px;
	width: 100%;
	max-width: 360px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
	direction: rtl;
	text-align: center;
	padding: 28px 22px;
	box-sizing: border-box;
}

.hex-school-view-error-text {
	margin: 0 0 18px;
	color: var(--hex-text-primary);
	font-size: 14px;
	line-height: 1.9;
}

.hex-school-view-error-retry-btn {
	min-width: 140px;
}

.hex-school-view h2 {
	color: var(--hex-primary);
	margin-top: 0;
}

.hex-school-view .notice-info {
	background: var(--hex-primary-soft);
	border-right: 4px solid var(--hex-primary-light);
	padding: 10px 14px;
	border-radius: 4px;
}

/* دکمه همبرگری منوی موبایل (فقط در حالت موبایل نمایش داده می‌شود) */
.hex-school-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 34px;
	height: 34px;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	background-image: none;
	border: 1px solid var(--hex-border-strong);
	border-radius: 6px;
	outline: 0;
	box-shadow: none;
	cursor: pointer;
	flex: 0 0 auto;
	-webkit-tap-highlight-color: transparent;
}

/* بدون این override صریح، برخی قالب‌ها/مرورگرها روی button:hover و
   button:active رنگ پیش‌فرض (اغلب قرمز) اعمال می‌کنند، چون سلکتور
   عنصر+pseudo-class آن‌ها هم‌ارزی با کلاس ساده‌ی ما دارد و می‌تواند در
   کش‌کید (cascade) برنده شود. برای همین همه‌ی حالت‌ها اینجا صراحتاً
   ثابت نگه داشته می‌شوند. */
.hex-school-menu-toggle:hover,
.hex-school-menu-toggle:focus,
.hex-school-menu-toggle:focus-visible,
.hex-school-menu-toggle:active {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	background-image: none;
	border-color: var(--hex-primary-light, var(--hex-border-strong));
	outline: 0;
	box-shadow: none;
	color: inherit;
}

.hex-school-menu-toggle-bar {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--hex-primary);
	border-radius: 2px;
}

/* پرده‌ی تیره پشت منوی کشویی موبایل */
.hex-school-nav-overlay {
	display: none;
}

/* نوار ناوبری شناور پایین صفحه (فقط موبایل؛ نک. بریک‌پوینت 782px پایین‌تر):
   میان‌بر ثابت به مهم‌ترین بخش‌های پنل بر اساس نقش کاربر (نک.
   render_bottom_nav در PHP). در دسکتاپ نمایش داده نمی‌شود چون منوی کناری
   کامل (hex-school-nav) از قبل همیشه در دسترس است. */
.hex-school-bottom-nav {
	display: none;
}

/* دکمه‌ی دایره‌ای شناور مستقل کنار نوار پایین (فقط موبایل؛ نک. استایل کامل
   آن در بریک‌پوینت 782px پایین‌تر). در دسکتاپ مثل خودِ نوار پایین پنهان
   است. */
.hex-school-bottom-nav-fab {
	display: none;
}

/* زیرمنوی سه‌دکمه‌ای (پیام‌ها/اعلانات/نظرسنجی) که با کلیک روی دکمه‌ی شناور
   «+» باز می‌شود. این المان به‌صورت sibling در کنار hex-school-bottom-nav
   قرار دارد (نه فرزند آن)، پس با مخفی‌شدن نوار اصلی به‌طور خودکار مخفی
   نمی‌شود؛ بدون این قانون، در دسکتاپ به‌صورت یک <div> معمولی (display:block
   پیش‌فرض مرورگر) و بدون پوزیشن/استایل صحیح (که فقط در بریک‌پوینت 782px
   پایین‌تر تعریف شده) به‌طور ناقص نمایش داده می‌شد. فقط موبایل. */
.hex-school-bottom-nav-fab-menu {
	display: none;
}

/* توجه: چون در بالای این فایل روی html فقط overflow-x:hidden تنظیم شده،
   طبق رفتار استاندارد مرورگرها overflow-y آن به‌صورت ضمنی auto محاسبه
   می‌شود و همین باعث می‌شود عنصر اسکرول‌شونده‌ی واقعی صفحه «html» باشد، نه
   «body». پس قفل کردن فقط body کافی نیست و باید روی html هم اعمال شود،
   وگرنه وقتی منوی موبایل باز است همچنان مقدار کمی از پشت آن اسکرول می‌شد. */
html.hex-school-nav-locked,
body.hex-school-nav-locked {
	overflow: hidden;
}

/* وقتی منوی همبرگری موبایل باز است، خودِ body قفل می‌شود، اما چون ناحیه‌ی
   محتوا (hex-school-view) اسکرول داخلی مستقل خودش را دارد (فاز 18)، صرفاً
   قفل کردن body کافی نیست و محتوای پشت منو همچنان با لمس/چرخ ماوس اسکرول
   می‌شد؛ این قانون آن اسکرول داخلی را هم غیرفعال می‌کند. */
body.hex-school-nav-locked .hex-school-view {
	overflow: hidden;
	touch-action: none;
}

/* ستون سمت راست/محتوا: نوار عنوان بالای صفحه + ناحیه‌ی محتوا (hex-school-view)
   زیر هم؛ این ستون کنار منو (hex-school-nav) قرار می‌گیرد تا منو از بالا تا
   پایین کل پنل را بگیرد، نه فقط زیر نوار عنوان. */
.hex-school-main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* نوار عنوان بالای ستون محتوا. با flex: 0 0 auto همیشه ارتفاع طبیعی خودش را
   حفظ می‌کند و هرگز فشرده یا اسکرول نمی‌شود (فاز 18). */
.hex-school-header-row {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

.hex-school-header-row > .hex-school-menu-toggle {
	margin: 10px 16px;
}

/* دکمه‌ی «سوییچ حالت روشن/تیره» حالا مستقیماً فرزند نوار هدر است (نه داخل
   .hex-school-header-actions) تا هم در موبایل و هم در دسکتاپ همیشه سمت
   راست نوار هدر (کنار دکمه‌ی منوی موبایل) بماند، نه در خوشه‌ی آیکن‌های
   سمت چپ. مقدار margin مشابه menu-toggle باعث هم‌ترازی عمودی می‌شود. */
.hex-school-header-row > .hex-theme-mode-toggle {
	margin-block: 10px;
	margin-inline-start: 16px;
	margin-inline-end: 8px;
	flex: 0 0 auto;
	align-self: center;
}

.hex-school-header-view {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 10px 24px;
	background: var(--hex-bg-header);
	border-bottom: 1px solid var(--hex-border);
}

/* دکمه‌ی ثابت «نصب اَپ» در هدر (بالا سمت راست، کنار دکمه‌ی حالت روشن/تیره)،
   برای همه‌ی نقش‌ها (نک. pwa-header-button.js برای منطق نمایش/مخفی‌سازی). */
.hex-school-pwa-header-install-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block: 10px;
	margin-inline-end: 8px;
	padding: 7px 14px;
	flex: 0 0 auto;
	align-self: center;
	border: 1px solid var(--hex-border-strong);
	border-radius: 999px;
	background: var(--hex-bg-header);
	color: var(--hex-primary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hex-school-pwa-header-install-btn:hover {
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: var(--hex-text-on-primary);
}

.hex-school-pwa-header-install-btn .hex-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.hex-school-pwa-header-install-btn-label {
		display: none;
	}

	.hex-school-pwa-header-install-btn {
		width: 34px;
		height: 34px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
}

/* دکمه‌های میان‌بر (فقط آیکن) در نوار هدر، بالای ناحیه‌ی محتوا سمت چپ صفحه */
.hex-school-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	margin-left: 20px;
	padding-block: 10px;
}

.hex-school-header-action-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	flex: 0 0 auto;
	border: 1px solid var(--hex-border-strong);
	border-radius: 50%;
	background: var(--hex-bg-header);
	color: var(--hex-primary);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hex-school-unread-dot.hex-school-header-action-dot {
	position: absolute;
	flex: none;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 11.67px), calc(-50% - 11.67px));
}

.hex-school-header-action-badge {
	position: absolute;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 11.67px), calc(-50% - 11.67px));
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	background: var(--hex-color-error);
	color: var(--hex-text-on-primary);
	font-size: 10px;
	line-height: 1;
	text-align: center;
	border-radius: 999px;
	border: 2px solid var(--hex-bg-header);
}

.hex-school-header-action-btn:hover {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-school-header-action-btn .hex-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
}

/* میان‌بر هدر «سوییچ حالت روشن/تیره»: دو آیکن (ماه/خورشید) روی هم قرار
   می‌گیرند و فقط یکی بر اساس attribute «data-hex-theme» روی wrapper اصلی
   پنل نمایش داده می‌شود؛ در پالت‌های روشن آیکن ماه (برای رفتن به تیره) و
   در پالت «تیره» آیکن خورشید (برای بازگشت به آخرین پالت روشن) دیده
   می‌شود. با افزوده‌شدن پالت‌های روشن جدید در آینده، این قانون بدون تغییر
   کار می‌کند چون فقط بر اساس «تیره بودن یا نبودن» تصمیم می‌گیرد. */
.hex-theme-mode-toggle {
	cursor: pointer;
}

.hex-theme-mode-toggle .hex-theme-mode-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--hex-primary);
}

.hex-theme-mode-toggle .hex-theme-mode-icon .hex-icon {
	position: static;
	transform: none;
}

.hex-theme-mode-toggle .hex-theme-mode-icon--moon {
	display: inline-flex;
}

[data-hex-theme="dark"] .hex-theme-mode-toggle .hex-theme-mode-icon--moon {
	display: none;
}

[data-hex-theme="dark"] .hex-theme-mode-toggle .hex-theme-mode-icon--sun {
	display: inline-flex;
}

.hex-theme-mode-toggle[disabled] {
	opacity: 0.6;
	cursor: default;
}

.hex-school-user-menu-wrap {
	position: relative;
}

.hex-school-current-user {
	color: var(--hex-primary);
	font-weight: bold;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 4px 6px;
	border-radius: 20px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
}

.hex-school-current-user:hover,
.hex-school-current-user[aria-expanded="true"] {
	background: var(--hex-border);
}

.hex-school-current-user-avatar {
	flex-shrink: 0;
}

.hex-school-user-menu-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--hex-primary);
	margin-inline-start: 2px;
	transition: transform 0.15s ease;
}

.hex-school-current-user[aria-expanded="true"] .hex-school-user-menu-caret {
	transform: rotate(180deg);
}

.hex-school-user-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc( 100% + 8px );
	min-width: 220px;
	max-width: calc( 100vw - 32px );
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(22, 160, 133, 0.15);
	padding: 6px;
	z-index: 40;
}

.hex-school-user-menu.is-open {
	display: block;
}

.hex-school-user-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hex-school-user-menu li + li {
	margin-top: 2px;
}

.hex-school-user-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--hex-text-heading);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}

.hex-school-user-menu a svg {
	flex-shrink: 0;
	color: var(--hex-text-secondary);
}

.hex-school-user-menu a:hover svg {
	color: var(--hex-primary);
}

.hex-school-user-menu a:hover {
	background: var(--hex-bg-soft);
	color: var(--hex-primary);
}

.hex-school-user-menu-logout {
	border-top: 1px solid var(--hex-border);
	margin-top: 6px;
	padding-top: 6px;
}

.hex-school-user-menu-logout .hex-school-logout-form {
	margin: 0;
}

.hex-school-user-menu-logout .hex-school-btn-link {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: right;
	padding: 9px 12px;
	border-radius: 999px;
	color: var(--hex-color-error);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}

.hex-school-user-menu-logout .hex-school-btn-link svg {
	flex-shrink: 0;
	color: var(--hex-color-error);
}

.hex-school-user-menu-logout .hex-school-btn-link:hover {
	background: var(--hex-color-error-bg);
	color: var(--hex-btn-danger-bg-hover);
}

.hex-school-header-user-menu-wrap {
	display: flex;
	align-items: center;
	padding-inline-end: 20px;
}

.hex-school-header-user-menu-wrap .hex-school-current-user {
	padding: 4px 4px;
}

/* برخلاف منوی کشویی پایین سایدبار (که سمت راستِ آن به لبه‌ی راست سایدبار
   می‌چسبد و به سمت چپ باز می‌شود)، این نمونه در انتهای نوار هدر و نزدیک به
   لبه‌ی چپ صفحه قرار دارد؛ اگر با همان right:0 باز شود، عرضش از لبه‌ی چپ
   صفحه بیرون می‌زند و نصفش دیده نمی‌شود. برای همین اینجا از سمت چپِ خودِ
   دکمه باز می‌شود تا همیشه داخل صفحه بماند. */
.hex-school-header-user-menu-wrap .hex-school-user-menu {
	right: auto;
	left: 5px;
}

@media (max-width: 782px) {
	.hex-school-header-user-menu-wrap {
		padding-inline-end: 16px;
	}

	.hex-school-menu-toggle {
		display: inline-flex;
	}

	/* در موبایل، دکمه‌ی منو (اولین/سمت راست‌ترین آیتم نوار هدر) و دو دکمه‌ی
	   بعدی آن (سوییچ حالت روشن/تیره و نصب اَپ) با فاصله‌ی یکسان از هم قرار
	   می‌گیرند. پیش‌تر margin دکمه‌ی منو (16px هر طرف، فیزیکی) + margin-inline-start
	   دکمه‌ی حالت تیره (16px) با هم جمع می‌شدند و فاصله‌ی اول را (۳۲px) خیلی
	   بیشتر از فاصله‌ی دوم/دکمه‌ی حالت تیره تا دکمه‌ی نصب اَپ (۸px) می‌کردند -
	   یعنی این دو دکمه از دکمه‌ی منو خیلی دورتر از حد معمول به نظر می‌رسیدند.
	   حالا هر سه فاصله (منو ← حالت تیره ← نصب اَپ) دقیقاً ۸px است: فقط عنصر
	   قبلی در هر جفت، margin سمت جدایی (inline-end/چپ در RTL) را می‌دهد و
	   عنصر بعدی صفر است، تا فاصله‌ها دوبار جمع نشوند. */
	.hex-school-header-row > .hex-school-menu-toggle {
		margin-block: 10px;
		margin-inline-start: 16px;
		margin-inline-end: 8px;
	}

	.hex-school-header-row > .hex-theme-mode-toggle {
		margin-inline-start: 0;
		margin-inline-end: 8px;
	}

	.hex-school-pwa-header-install-btn {
		margin-inline-start: 0;
		margin-inline-end: 8px;
	}

	.hex-school-header-view {
		display: none;
	}

	.hex-school-header-row {
		flex-wrap: nowrap;
		align-items: center;
		background: var(--hex-bg-header);
		border-bottom: 1px solid var(--hex-border);
	}

	.hex-school-header-actions {
		margin-inline-start: auto;
		margin-left: 0;
		padding-block: 0;
		padding-inline-end: 16px;
	}

	.hex-school-user-menu {
		max-width: calc( 100vw - 32px );
	}

	.hex-school-layout {
		flex-direction: column;
		min-height: 0;
		overflow-x: hidden;
		max-width: 100vw;
	}

	/* منو به‌صورت کشویی (Off-canvas) از سمت راست صفحه باز می‌شود */
	.hex-school-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 260px;
		max-width: 80%;
		height: 100vh;
		height: 100dvh;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		z-index: 1000;
		box-shadow: -6px 0 16px rgba(15, 23, 42, 0.25);
		overflow-y: auto;
	}

	.hex-school-nav.is-open {
		transform: translateX(0);
	}

	.hex-school-nav ul {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.hex-school-nav a {
		border-right: 3px solid transparent;
	}

	.hex-school-nav li.is-active > .hex-school-nav-item-row a {
		border-right-color: var(--hex-text-menu-active);
	}

	.hex-school-nav-overlay {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(15, 23, 42, 0.5);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	.hex-school-nav-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* فضای خالی اضافه‌ی پایین ناحیه‌ی محتوا، تا آخرین آیتم هر بخش پشت نوار
	   شناور پایین (که با position: fixed مستقل از اسکرول محتوا است) پنهان
	   نشود. ارتفاع نوار (۶۰px) + فاصله‌ی آن از پایین (۱۴px) + کمی فاصله‌ی
	   اضافه = ۱۰۵px. */
	.hex-school-view {
		padding-bottom: 105px;
	}

	/* نوار ناوبری شناور پایین صفحه: به‌صورت مستقل از پالت رنگی منوی کناری
	   (دیگر از --hex-bg-menu استفاده نمی‌کند) و به سبک «liquid glass»
	   (شیشه‌ی مایع/بلور شده) است — پس‌زمینه‌ی آن طوسیِ روشن (rgb 240,240,240؛
	   طبق نمونه‌ی درخواستی، نه تیره) نیمه‌شفاف است تا حس شیشه‌ای‌بودن پررنگ‌تر
	   و محسوس‌تر باشد + backdrop-filter: blur/saturate قوی‌تر برای دیده‌شدن
	   محو محتوای پشت آن، به‌همراه یک border سفید ضخیم‌تر (نسبت به قبل) و
	   highlight روی لبه‌ی بالایی برای حس شیشه‌ای/برجسته‌ی بیشتر.
	   از سمت چپ صفحه ۱۴ پیکسل فاصله دارد؛ سمت راستِ آن دیگر به لبه‌ی صفحه
	   نمی‌چسبد، بلکه به اندازه‌ی عرض دکمه‌ی دایره‌ای شناور مستقل
	   (hex-school-bottom-nav-fab) + فاصله‌ی جداکننده از آن عقب کشیده شده
	   تا آن دکمه، جدا از این قرص، در فضای آزاد سمت راست بنشیند (نک. استایل
	   دکمه پایین‌تر). فضای داخلی نوار (padding-inline افقی و margin-block
	   عمودی آیتم‌ها) هم بیشتر شد تا آیتم‌ها نفس بکشند. با border-radius
	   کامل (نیم‌دایره در دو انتها) به شکل یک قرص شناور در می‌آید. */
	.hex-school-bottom-nav {
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		position: fixed;
		left: 14px;
		right: calc(14px + 60px + 10px);
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		height: 60px;
		padding-inline: 10px;
		background: rgba(240, 240, 240, 0.75);
		-webkit-backdrop-filter: blur(24px) saturate(200%);
		backdrop-filter: blur(24px) saturate(200%);
		border: 1.5px solid rgba(255, 255, 255, 0.75);
		border-radius: 999px;
		box-shadow:
			0 8px 24px rgba(15, 23, 42, 0.16),
			0 2px 6px rgba(15, 23, 42, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.7);
		z-index: 500;
	}

	.hex-school-bottom-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		flex: 1 1 0;
		min-width: 0;
		margin-block: 8px;
		border-radius: 999px;
		color: #000000;
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.15s ease, background 0.15s ease;
	}

	/* دکمه‌ی دایره‌ای شناور مستقل، کنار نوار پایین (نه داخل آن) - سمت راست
	   صفحه، با فاصله‌ی مشخص (۱۰px) از قرص منو. برخلاف نوار اصلی، پس‌زمینه‌ی
	   این دکمه دیگر شیشه‌ای/سفید نیست، بلکه با رنگ اصلی پالت رنگی فعال
	   (--hex-primary) پر می‌شود تا به‌عنوان یک دکمه‌ی «افزودن سریع» برجسته و
	   قابل‌تشخیص باشد و با تغییر پالت رنگی کاربر هم‌رنگ آن به‌روز شود. چون
	   این عنصر یک <button> واقعی است، مرورگر برای آن استایل‌های پیش‌فرض
	   hover/active/tap-highlight دارد (مثلاً هایلایت آبی رنگ لمسی در
	   سافاری/کروم موبایل)؛ برای همین ظاهر پیش‌فرض دکمه با appearance:none و
	   -webkit-tap-highlight-color خنثی شده و به‌جایش حالت‌های hover/active
	   خودمان (کمی تیره‌تر از رنگ اصلی) تعریف شده تا رنگ مرورگر دیگر روی آن
	   دیده نشود. */
	.hex-school-bottom-nav-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		width: 60px;
		height: 60px;
		padding: 0;
		background: var(--hex-primary);
		border: 1px solid var(--hex-primary);
		border-radius: 999px;
		box-shadow:
			0 8px 24px rgba(15, 23, 42, 0.16),
			0 2px 6px rgba(15, 23, 42, 0.08);
		color: var(--hex-text-on-primary);
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: transparent;
		outline: none;
		transition: background 0.15s ease, border-color 0.15s ease;
		z-index: 500;
	}

	.hex-school-bottom-nav-fab:hover,
	.hex-school-bottom-nav-fab:active {
		background: var(--hex-primary-dark);
		border-color: var(--hex-primary-dark);
		color: var(--hex-text-on-primary);
	}

	.hex-school-bottom-nav-fab:focus-visible {
		box-shadow:
			0 8px 24px rgba(15, 23, 42, 0.16),
			0 2px 6px rgba(15, 23, 42, 0.08),
			0 0 0 3px rgba(var(--hex-primary-rgb), 0.35);
	}

	.hex-school-bottom-nav-fab .hex-icon {
		width: 22px;
		height: 22px;
	}

	.hex-school-bottom-nav-item:hover,
	.hex-school-bottom-nav-item:focus,
	.hex-school-bottom-nav-item:active,
	.hex-school-bottom-nav-item:visited {
		text-decoration: none !important;
	}

	.hex-school-bottom-nav-item .hex-icon {
		width: 18px;
		height: 18px;
	}

	.hex-school-bottom-nav-item span {
		max-width: 100%;
		overflow: hidden;
		font-size: 10px;
		line-height: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.hex-school-bottom-nav-item.is-active {
		background: rgba(var(--hex-primary-rgb), 0.14);
		color: var(--hex-primary-dark);
		font-weight: bold;
	}

	/* آیتم «منو» در نوار پایین یک <button> واقعی است (نه <a>، چون به هیچ
	   نمایی لینک نمی‌شود) و کلاس hex-school-menu-toggle را هم دارد تا از
	   همان هندلر کلیک دکمه‌ی همبرگر هدر برای باز کردن سایدبار استفاده مجدد
	   شود (نک. جاوااسکریپت). چون hex-school-menu-toggle به‌تنهایی استایل
	   مستقل خودش را دارد (عرض/ارتفاع ثابت ۳۴px، border و border-radius
	   ۶px، نمایش‌داده‌نشده به‌طور پیش‌فرض)، این سلکتور ترکیبی با تخصیصیت
	   بالاتر (هر دو کلاس با هم) آن استایل‌ها را خنثی می‌کند تا این دکمه هم
	   دقیقاً مثل بقیه‌ی آیتم‌های نوار پایین (عرض منعطف، بدون border، آیکن+
	   برچسب) دیده شود. */
	.hex-school-bottom-nav-item.hex-school-menu-toggle {
		display: flex;
		width: auto;
		height: auto;
		padding: 0;
		border: none;
		border-radius: 999px;
		background: transparent;
		appearance: none;
		-webkit-appearance: none;
		font: inherit;
		cursor: pointer;
	}

	.hex-school-bottom-nav-item.hex-school-menu-toggle:hover,
	.hex-school-bottom-nav-item.hex-school-menu-toggle:focus,
	.hex-school-bottom-nav-item.hex-school-menu-toggle:focus-visible,
	.hex-school-bottom-nav-item.hex-school-menu-toggle:active {
		border: none;
		background: transparent;
		box-shadow: none;
		color: inherit;
	}

	/* زیرمنوی دکمه‌ی «+»: سه دکمه‌ی میان‌بر (پیام‌ها، اعلانات، نظرسنجی) که با
	   کلیک روی hex-school-bottom-nav-fab به سمت بالا باز می‌شوند. هم‌راستا با
	   دکمه‌ی «+» (سمت راست صفحه) و درست بالای آن قرار می‌گیرد. پس‌زمینه‌ی هر
	   دکمه دقیقاً همان سبک «شیشه‌ای» (liquid glass) نوار اصلی منوی پایین
	   (hex-school-bottom-nav) است تا از نظر بصری یک مجموعه‌ی هماهنگ دیده شوند.
	   با flex-direction: column-reverse چیده می‌شوند تا اولین آیتم در HTML
	   (پیام‌ها) نزدیک‌ترین به دکمه‌ی «+» (پایین‌ترین) باشد و آیتم آخر
	   (نظرسنجی) بالاترین. پیش از باز شدن، با opacity/transform مخفی و
	   غیرقابل‌کلیک (pointer-events: none) است و با کلاس is-open نمایان و
	   قابل‌کلیک می‌شود. */
	.hex-school-bottom-nav-fab-menu {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
		position: fixed;
		right: 14px;
		bottom: calc(14px + 60px + 14px + env(safe-area-inset-bottom, 0px));
		z-index: 499;
		pointer-events: none;
	}

	.hex-school-bottom-nav-fab-menu-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		height: 46px;
		padding-inline: 14px;
		background: rgba(240, 240, 240, 0.75);
		-webkit-backdrop-filter: blur(24px) saturate(200%);
		backdrop-filter: blur(24px) saturate(200%);
		border: 1.5px solid rgba(255, 255, 255, 0.75);
		border-radius: 999px;
		box-shadow:
			0 8px 24px rgba(15, 23, 42, 0.16),
			0 2px 6px rgba(15, 23, 42, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.7);
		color: #000000;
		text-decoration: none !important;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
		opacity: 0;
		transform: translateY(10px) scale(0.9);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	.hex-school-bottom-nav-fab-menu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}

	.hex-school-bottom-nav-fab-menu-icon .hex-icon {
		width: 18px;
		height: 18px;
	}

	.hex-school-bottom-nav-fab-menu-label {
		font-size: 13px;
		line-height: 1;
	}

	.hex-school-bottom-nav-fab-menu-item:hover,
	.hex-school-bottom-nav-fab-menu-item:focus,
	.hex-school-bottom-nav-fab-menu-item:active,
	.hex-school-bottom-nav-fab-menu-item:visited {
		text-decoration: none !important;
	}

	/* حالت باز: هر دکمه با کمی تأخیر نسبت به قبلی خودش (nth-child) ظاهر
	   می‌شود تا حس «باز شدن پلکانی به سمت بالا» داشته باشد. چون چیدمان
	   column-reverse است، اولین فرزند در DOM (پیام‌ها) پایین‌ترین/اولین چیزی
	   است که دیده می‌شود، پس با کمترین تأخیر ظاهر می‌شود. */
	.hex-school-bottom-nav-fab-menu.is-open {
		pointer-events: auto;
	}

	.hex-school-bottom-nav-fab-menu.is-open .hex-school-bottom-nav-fab-menu-item {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	.hex-school-bottom-nav-fab-menu.is-open .hex-school-bottom-nav-fab-menu-item:nth-child(1) {
		transition-delay: 0.06s;
	}

	.hex-school-bottom-nav-fab-menu.is-open .hex-school-bottom-nav-fab-menu-item:nth-child(2) {
		transition-delay: 0.03s;
	}

	.hex-school-bottom-nav-fab-menu.is-open .hex-school-bottom-nav-fab-menu-item:nth-child(3) {
		transition-delay: 0s;
	}

	/* چرخش آیکون «+» به ۴۵ درجه (تبدیل به ضربدر) وقتی زیرمنو باز است، برای
	   بازخورد بصری روشن به کاربر که دکمه در حالت «باز» است. */
	.hex-school-bottom-nav-fab.is-open .hex-icon {
		transform: rotate(45deg);
	}

	.hex-school-bottom-nav-fab .hex-icon {
		transition: transform 0.18s ease;
	}
}

/* پالت تیره: برخلاف قبل (که نوار پایین در همه‌ی پالت‌ها یک پس‌زمینه‌ی
   طوسیِ روشنِ ثابت داشت)، اکنون در پالت تیره نسخه‌ی «شیشه‌ای تیره»
   اختصاصی خودش را دارد تا هم با بقیه‌ی پنل (که در پالت تیره پس‌زمینه‌ی
   تیره دارد) هماهنگ باشد و هم افکت شیشه‌ای (blur از پشت محتوای تیره)
   قابل مشاهده بماند. همین قانون برای زیرمنوی سه‌دکمه‌ای دکمه‌ی «+»
   (hex-school-bottom-nav-fab-menu-item) هم اعمال می‌شود تا از نظر بصری
   با نوار اصلی هماهنگ بمانند. دکمه‌ی شناور «+» از این قانون مستثناست
   چون پس‌زمینه‌ی آن همیشه رنگ اصلی پالت (--hex-primary) است که خودش با
   تغییر پالت/تم به‌روز می‌شود و در پالت تیره هم به‌خوبی دیده می‌شود. */
@media (max-width: 782px) {

	[data-hex-theme="dark"] .hex-school-bottom-nav,
	[data-hex-theme="dark"] .hex-school-bottom-nav-fab-menu-item {
		background: rgba(30, 41, 59, 0.75);
		border-color: rgba(148, 163, 184, 0.25);
		box-shadow:
			0 8px 24px rgba(0, 0, 0, 0.35),
			0 2px 6px rgba(0, 0, 0, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	/* رنگ متن/آیکن هر آیتم روی خودِ لینک تنظیم شده، نه روی نوار/زیرمنوی
	   والد؛ چون هر آیتم (hex-school-bottom-nav-item و
	   hex-school-bottom-nav-fab-menu-item) از قبل رنگ مشکی (#000000) صریح
	   خودش را دارد (نک. تعریف پایه‌ی همین کلاس‌ها بالاتر) و صرفاً رنگ روی
	   والد به‌خاطر آن رنگ صریح ارث‌بری نمی‌شود. */
	[data-hex-theme="dark"] .hex-school-bottom-nav-item,
	[data-hex-theme="dark"] .hex-school-bottom-nav-fab-menu-item {
		color: #f1f5f9;
	}

	[data-hex-theme="dark"] .hex-school-bottom-nav-item.is-active {
		background: rgba(var(--hex-primary-rgb), 0.22);
		color: var(--hex-primary-light);
	}
}

/* ================= دانش‌آموزان و معلمان (فاز 5) ================= */

.hex-school-subtabs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	gap: 6px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--hex-border);
	scrollbar-width: thin;
	scrollbar-color: var(--hex-border-strong) transparent;
}

.hex-school-subtabs::-webkit-scrollbar {
	height: 6px;
}

.hex-school-subtabs::-webkit-scrollbar-thumb {
	background: var(--hex-border-strong);
	border-radius: 8px;
}

.hex-school-subtabs::-webkit-scrollbar-track {
	background: transparent;
}

.hex-school-subtabs a {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 8px 16px;
	text-decoration: none;
	color: var(--hex-text-secondary);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.hex-school-subtabs a.is-active {
	color: var(--hex-primary);
	border-bottom-color: var(--hex-primary);
	font-weight: bold;
}

/* زیرتب‌های داخلی («لیست مقالات» / «ایجاد مقاله» و مشابه): برخلاف تب‌های
   اصلی (خط زیرین)، این‌ها یک سطح پایین‌تر هستند؛ برای اینکه با تب‌های
   بالاتر اشتباه گرفته نشوند، به‌شکل دکمه‌های قرصی (pill) با پس‌زمینه‌ی
   ملایم نمایش داده می‌شوند، نه با خط زیرین. */
.hex-school-subtabs-nested {
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: none;
}

.hex-school-subtabs-nested a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	margin-bottom: 0;
	border: 1px solid var(--hex-border);
	border-bottom: 1px solid var(--hex-border);
	border-radius: 999px;
	background: var(--hex-bg-page);
	color: var(--hex-text-secondary);
	font-size: 13px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hex-school-subtabs-nested a .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-school-subtabs-nested a:hover {
	color: var(--hex-primary);
	border-color: var(--hex-primary);
}

.hex-school-subtabs-nested a.is-active {
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: var(--hex-text-on-primary);
	font-weight: normal;
}

/* تب‌های بخش «پیام‌ها» (پیام‌های شخصی / گروه‌ها) ثابت بمانند و با اسکرول
   محتوا (لیست مکالمات یا گروه‌ها) بالا نروند؛ چون این تب‌ها داخل ناحیه‌ی
   محتوایی (hex-school-view) هستند که خودش اسکرول مستقل دارد (فاز 18)،
   position:sticky نسبت به همان ناحیه عمل می‌کند. رنگ پس‌زمینه هم‌رنگ خود
   ناحیه‌ی محتواست تا هنگام چسبیدن به بالا، محتوای زیرش از پشت دیده نشود. */
.hex-messages-subtabs {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--hex-bg-page);
	padding-top: 2px;
}

.hex-people-select {
	padding: 6px 10px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 8px;
	min-width: 140px;
	background: var(--hex-bg-card);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-people-select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

[data-hex-theme="dark"] .hex-people-select {
	color: #ffffff;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] .hex-people-select option {
	color: #0f172a;
}

/* ================= برنامه درسی هفتگی (فاز 4 + بازطراحی) ================= */

/* مثل صفحه‌ی ثبت‌نام، این صفحه هم قبلاً با max-width محدود و وسط‌چین بود و در
   دسکتاپ باریک‌تر از بقیه‌ی صفحات به نظر می‌رسید؛ حالا کل عرض موجود را می‌گیرد. */
.hex-tt-page {
	max-width: 100%;
}

.hex-tt-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding: 22px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	box-shadow: 0 10px 24px -8px rgba(var(--hex-primary-rgb), 0.45);
	color: var(--hex-text-on-primary);
}

.hex-tt-hero-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
}

.hex-tt-hero-icon .hex-icon {
	width: 26px;
	height: 26px;
	color: var(--hex-text-on-primary);
}

.hex-tt-hero-text h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
}

.hex-tt-hero-text p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
}

.hex-tt-card {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 16px;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	padding: 22px 24px 24px;
}

.hex-tt-class-switcher {
	margin-bottom: 18px;
}

.hex-tt-class-switcher .hex-school-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hex-tt-class-switcher label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
	white-space: nowrap;
}

.hex-tt-class-switcher label .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-tt-class-switcher select {
	padding: 9px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	font-family: inherit;
	font-size: 14px;
	min-width: 200px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-tt-class-switcher select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

.hex-tt-single-class-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-primary-dark);
}

[data-hex-theme="dark"] .hex-tt-single-class-title {
	color: #ffffff;
}

.hex-tt-single-class-title .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-primary);
}

.hex-tt-bank {
	margin-bottom: 20px;
	padding: 14px 16px;
	border: 1px dashed var(--hex-primary-soft);
	border-radius: 12px;
	background: var(--hex-primary-soft);
}

.hex-school-tt-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--hex-primary-dark);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 10px;
}

.hex-school-tt-hint .hex-icon {
	width: 14px;
	height: 14px;
	color: var(--hex-primary);
}

.hex-school-tt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hex-tt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--hex-bg-card);
	border: 1.5px dashed var(--hex-primary-light);
	border-radius: 20px;
	color: var(--hex-primary);
	cursor: grab;
	font-size: 13px;
	font-weight: 600;
	user-select: none;
	box-shadow: 0 1px 4px -1px rgba(22, 160, 133, 0.2);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.hex-tt-chip .hex-icon {
	width: 13px;
	height: 13px;
	color: var(--hex-primary);
}

.hex-tt-chip:hover {
	background: var(--hex-primary-soft);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px -2px rgba(22, 160, 133, 0.35);
}

.hex-tt-chip:active {
	cursor: grabbing;
	transform: translateY(0);
}

/* پالت تیره — برنامه درسی هفتگی: رنگ متن فیلد انتخاب کلاس، متن راهنمای
   انتخاب درس و حاشیه‌ی کادر انتخاب درس‌ها (که در حالت تیره با پس‌زمینه‌اش
   هم‌رنگ و نامرئی می‌شد) خوانا شود. */
[data-hex-theme="dark"] .hex-tt-class-switcher select {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-school-tt-hint {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-tt-bank {
	border: 1px solid #4ade80;
}

.hex-school-tt-grid-wrap {
	overflow-x: auto;
	border-radius: 12px;
	border: 1px solid var(--hex-border-light);
}

.hex-school-tt-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 640px;
}

.hex-school-tt-grid th,
.hex-school-tt-grid td {
	border-bottom: 1px solid var(--hex-border-light);
	border-left: 1px solid var(--hex-border-light);
	padding: 10px;
	text-align: center;
	vertical-align: middle;
}

.hex-school-tt-grid th:last-child,
.hex-school-tt-grid td:last-child {
	border-left: none;
}

.hex-school-tt-grid thead th {
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	color: var(--hex-text-on-primary);
	font-size: 13.5px;
	font-weight: 700;
	padding: 13px 10px;
	border-left-color: rgba(255, 255, 255, 0.25);
}

.hex-school-tt-grid thead th:first-child {
	border-top-right-radius: 10px;
}

.hex-school-tt-grid thead th:last-child {
	border-top-left-radius: 10px;
}

.hex-school-tt-grid tbody th {
	background: var(--hex-bg-page);
	color: var(--hex-primary-dark);
	font-weight: 700;
}

.hex-school-tt-grid tbody tr:nth-child(even) td {
	background: var(--hex-bg-soft);
}

.hex-school-tt-grid tbody tr:last-child td:first-child {
	border-bottom-right-radius: 10px;
}

.hex-school-tt-grid tbody tr:last-child td:last-child {
	border-bottom-left-radius: 10px;
}

.hex-tt-period-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	color: var(--hex-text-on-primary);
	font-size: 12.5px;
	font-weight: 700;
}

.hex-tt-cell {
	position: relative;
	min-width: 110px;
	height: 62px;
	transition: background 0.15s ease;
}

.hex-tt-dropzone {
	background: var(--hex-bg-soft);
}

.hex-tt-dropzone:hover {
	background: var(--hex-primary-soft);
}

.hex-tt-cell.is-dragover {
	background: var(--hex-primary-soft);
	outline: 2px dashed var(--hex-primary-light);
	outline-offset: -2px;
}

.hex-tt-cell.is-loading {
	opacity: 0.5;
}

.hex-tt-cell.is-filled {
	background: var(--hex-primary-soft);
}

.hex-tt-subject {
	display: block;
	font-size: 13px;
	color: var(--hex-primary-dark);
	font-weight: 700;
	padding: 2px 6px;
}

[data-hex-theme="dark"] .hex-tt-subject {
	color: var(--hex-color-success-light);
}

.hex-tt-subject small {
	display: block;
	font-weight: 500;
	color: var(--hex-text-secondary);
	font-size: 11px;
	margin-top: 2px;
}

.hex-tt-remove {
	position: absolute;
	top: 4px;
	left: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-tt-remove:hover {
	background: var(--hex-color-error);
	color: var(--hex-text-on-primary);
}

@media (max-width: 640px) {
	.hex-tt-hero {
		flex-direction: column;
		text-align: center;
	}

	.hex-tt-class-switcher .hex-school-search-form {
		flex-wrap: wrap;
	}

	.hex-tt-class-switcher select {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ================= مدیریت کلاس‌ها (فاز 2) ================= */

.hex-school-inline-notice {
	padding: 10px 14px;
	margin-bottom: 16px;
	border-radius: 4px;
	border-right: 4px solid var(--hex-primary-light);
	background: var(--hex-primary-soft);
}

.hex-school-inline-notice.notice-error {
	border-right-color: var(--hex-color-error);
	background: #fef2f2;
}

.hex-school-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

/* دکمه‌ی شناور دایره‌ای (فقط آیکن +) برای «پیام جدید»/«گروه جدید»، ثابت در پایین صفحه */
.hex-school-fab {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--hex-primary-light);
	color: var(--hex-bg-card);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
	transition: background 0.15s ease, transform 0.15s ease;
}

.hex-school-fab:hover {
	background: var(--hex-primary);
	transform: scale(1.05);
}

.hex-school-fab .hex-icon {
	width: 26px;
	height: 26px;
	stroke-width: 2.5;
}

.hex-school-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
}

.hex-school-search-form select,
.hex-school-search-form input {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.hex-school-search-form input[type="search"] {
	padding: 6px 10px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 4px;
	min-width: 200px;
}

.hex-school-btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--hex-border-strong);
	background: var(--hex-bg-page);
	color: var(--hex-primary);
	text-decoration: none;
	cursor: pointer;
	font-size: 14px;
}

.hex-school-btn:hover {
	background: var(--hex-primary-soft);
}

/* دکمه‌ی «جستجو» در فرم‌های جستجو (کلاس‌ها، دروس، مدیریت مالی و ...): آیکن
   ذره‌بین کنار متن + هاور یکدست با بقیه‌ی دکمه‌ها (پس‌زمینه‌ی ملایم‌تر برند و
   border/آیکن یک پله تیره‌تر، بدون افت خوانایی). */
.hex-school-search-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hex-school-search-submit-btn .hex-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.hex-school-search-submit-btn:hover {
	background: var(--hex-primary-soft-hover);
	border-color: var(--hex-primary-light);
	color: var(--hex-primary-dark);
}

.hex-school-btn-primary {
	background: var(--hex-primary-light);
	border-color: var(--hex-primary-light);
	color: var(--hex-btn-primary-text);
}

.hex-school-btn-primary:hover {
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: var(--hex-btn-primary-text);
}

/* دکمه‌ی «افزودن کلاس جدید» در بخش کلاس‌ها: کلاس شناسایی؛ استایل واقعی
   (فضای داخلی + سایه) در پایین فایل با اسکوپ .hex-school-classes نوشته شده
   تا از قانون عمومی‌تر .hex-school-classes .hex-school-btn جلو بزند. */
.hex-classes-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* دکمه‌ی ثانویه (تعریف پایه‌ی فاز ۵)؛ برخلاف .hex-school-btn (که هم‌اکنون در
   بیشتر بخش‌های پنل به‌عنوان دکمه‌ی پیش‌فرض/ثانویه استفاده می‌شود)، این کلاس
   برای استفاده‌ی آگاهانه‌ی بخش‌هایی است که در فازهای بعدی به این ظاهر
   (پس‌زمینه‌ی خاکستری ملایم، بدون border پررنگ) نیاز داشته باشند. */
.hex-school-btn-secondary {
	background: var(--hex-btn-secondary-bg);
	border: 1px solid transparent;
	color: var(--hex-btn-secondary-text);
}

.hex-school-btn-secondary:hover {
	background: var(--hex-btn-secondary-bg-hover);
	color: var(--hex-btn-secondary-text);
}

.hex-teacher-enroll-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	text-decoration: none !important;
	border-bottom: none !important;
}

.hex-teacher-enroll-btn:hover,
.hex-teacher-enroll-btn:focus,
.hex-teacher-enroll-btn:active {
	text-decoration: none !important;
	border-bottom: none !important;
}

/* ================= جستجوی فیلتری Ajax افراد (دانش‌آموزان/معلمان/والدین) ================= */

.hex-people-search {
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 6px;
	padding: 14px;
	margin-bottom: 16px;
}

.hex-people-search-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 8px 12px;
}

.hex-people-search-grid p {
	margin: 0;
}

.hex-people-search-grid label {
	display: block;
	font-size: 12px;
	color: var(--hex-text-secondary);
	margin-bottom: 4px;
}

.hex-people-search-grid input,
.hex-people-search-grid select {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 4px;
	box-sizing: border-box;
	background: var(--hex-bg-card);
	color: var(--hex-text-primary);
}

.hex-people-search-grid input:focus,
.hex-people-search-grid select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

.hex-people-search-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
}

.hex-people-results {
	transition: opacity 0.15s ease;
}

/* جدول دانش‌آموزان (تب «دانش‌آموزان») به‌جای تبدیل به کارت عمودی، عمداً
   به‌صورت یک جدول واقعی با اسکرول افقی محدود به خودش نگه داشته شده؛ چون
   این جدول دو ستون select (تخصیص کلاس/والد) دارد که در حالت کارتی راحت
   دیده و استفاده نمی‌شوند. راز اینکه این اسکرول فقط خود جدول را تحت تأثیر
   قرار می‌دهد نه کل صفحه را، این است که خودِ باکس بیرونی (.hex-school-table-scroll)
   عرضش را از والد نمی‌گیرد (max-width:100% + overflow-x:auto)، در حالی که
   جدول داخلش آزاد است هر عرضی که لازم دارد داشته باشد؛ در نتیجه فقط داخل
   همین باکس اسکرول می‌شود و بقیه‌ی صفحه (منو، هدر و ...) دست‌نخورده و در
   جای خودش می‌ماند. */
.hex-school-table-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
	border: 1px solid var(--hex-border);
}

.hex-school-table-scroll .hex-school-table {
	border: 0;
	margin: 0;
}

.hex-school-table-scroll::-webkit-scrollbar {
	height: 8px;
}

.hex-school-table-scroll::-webkit-scrollbar-thumb {
	background: var(--hex-border-strong);
	border-radius: 8px;
}

.hex-school-table-scroll::-webkit-scrollbar-track {
	background: var(--hex-bg-page);
}

.hex-school-table {
	width: 100%;
	border-collapse: collapse;
}

.hex-school-table th,
.hex-school-table td {
	padding: 10px 12px;
	text-align: right;
	border-bottom: 1px solid var(--hex-border);
}

.hex-school-table thead th {
	background: var(--hex-bg-page);
	color: var(--hex-primary);
	font-weight: bold;
}

.hex-school-table tbody tr:hover {
	background: var(--hex-bg-page);
}

.hex-school-muted {
	color: var(--hex-text-muted);
	font-style: italic;
}

.hex-school-empty {
	padding: 20px;
	text-align: center;
	color: var(--hex-text-secondary);
}

.hex-school-pagination {
	margin-top: 16px;
	display: flex;
	gap: 6px;
}

.hex-school-pagination a {
	padding: 6px 12px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 4px;
	text-decoration: none;
	color: var(--hex-primary);
}

.hex-school-pagination a.is-active {
	background: var(--hex-primary);
	color: var(--hex-bg-card);
	border-color: var(--hex-primary);
}

/* ================= بازطراحی بخش «کلاس‌ها»: باکس‌های شیک‌تر و دکمه‌های خوش‌فرم‌تر ================= */

.hex-classes-panel {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.hex-classes-panel .hex-school-toolbar {
	margin-bottom: 18px;
}

.hex-classes-panel > h3:first-child {
	margin-top: 0;
}

.hex-classes-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	color: var(--hex-primary);
	font-size: 14px;
	text-decoration: none;
	transition: gap 0.15s ease, color 0.15s ease;
}

.hex-classes-back-link .hex-icon {
	transform: scaleX(-1);
}

.hex-classes-back-link:hover {
	gap: 10px;
	color: var(--hex-primary-light);
}

/* نسخه‌ی «فقط آیکن» دکمه‌ی بازگشت (بدون متن)، برای صفحاتی مثل جزئیات
   دانش‌آموز که فقط یک دکمه‌ی دایره‌ای با آیکن فلش لازم دارند. */
.hex-classes-back-link--icon-only {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
	gap: 0;
}

.hex-classes-back-link--icon-only .hex-icon {
	width: 17px;
	height: 17px;
}

.hex-classes-back-link--icon-only:hover {
	gap: 0;
	background: var(--hex-primary-soft-hover);
	color: var(--hex-primary-dark);
	transform: translateY(-1px);
}

/* دکمه‌ی «بازگشت» صفحه‌ی پروفایل (وقتی مدیر پروفایل شخص دیگری را مشاهده
   می‌کند): به‌صورت یک دکمه‌ی مدرن (قرص‌مانند با پس‌زمینه و سایه‌ی نرم) به‌جای
   یک لینک ساده‌ی متنی. */
.hex-profile-back-link,
.hex-profile-back-link * {
	text-decoration: none !important;
}

.hex-profile-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	color: var(--hex-text-heading);
	font-size: 13.5px;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease, gap .15s ease;
}

.hex-profile-back-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
	flex-shrink: 0;
	transform: scaleX(-1);
	transition: background .15s ease, color .15s ease;
}

.hex-profile-back-link-icon svg {
	width: 15px;
	height: 15px;
}

.hex-profile-back-link:hover,
.hex-profile-back-link:focus-visible {
	gap: 11px;
	border-color: var(--hex-primary-light);
	color: var(--hex-primary-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
	transform: translateY(-1px);
}

.hex-profile-back-link:hover .hex-profile-back-link-icon,
.hex-profile-back-link:focus-visible .hex-profile-back-link-icon {
	background: var(--hex-primary-soft-hover);
	color: var(--hex-primary-dark);
}

.hex-school-classes .hex-school-search-form input[type="search"] {
	padding: 9px 14px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 999px;
	min-width: 220px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-school-classes .hex-school-search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

[data-hex-theme="dark"] .hex-school-classes .hex-school-search-form input[type="search"] {
	background: var(--hex-bg-soft);
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-school-classes .hex-school-search-form input[type="search"]::placeholder {
	color: var(--hex-text-muted);
}

.hex-school-classes .hex-school-btn,
.hex-school-classes .hex-school-btn:link,
.hex-school-classes .hex-school-btn:visited,
.hex-school-classes .hex-school-btn:hover,
.hex-school-classes .hex-school-btn:focus,
.hex-school-classes .hex-school-btn:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hex-school-classes .hex-school-btn .hex-icon {
	width: 15px;
	height: 15px;
}

.hex-school-classes .hex-school-btn:hover {
	transform: translateY(-1px);
}

.hex-school-classes .hex-school-btn-primary {
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
	border-color: var(--hex-primary);
	color: var(--hex-bg-card);
	/* به‌جای سبز ثابت، به توکن رنگی پالت (--hex-primary-rgb) وصل شد تا با تغییر
	   پالت (روشن/آبی/تیره) هماهنگ بماند. */
	box-shadow: 0 4px 10px rgba(var(--hex-primary-rgb), 0.25);
}

/* دکمه‌ی «افزودن کلاس جدید»: فضای داخلی عمودی بیشتر و سایه‌ی نرم‌تر و
   بزرگ‌تر از حالت پیش‌فرض دکمه‌های این بخش. !important گذاشته شد چون این
   دکمه چند برابر توسط قوانین دیگر (پایه + مخصوص این بخش) استایل می‌گیرد و
   بدون آن به‌راحتی override می‌شد. */
.hex-school-classes .hex-classes-add-btn,
.hex-school-classes .hex-classes-add-btn:hover,
.hex-school-classes .hex-classes-add-btn:focus,
.hex-school-classes .hex-classes-add-btn:active {
	padding: 14px 22px !important;
}

.hex-school-classes .hex-classes-add-btn {
	box-shadow: 0 8px 20px -4px rgba(var(--hex-primary-rgb), 0.35) !important;
}

.hex-school-classes .hex-school-btn-primary:hover {
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-dark));
	border-color: var(--hex-primary-dark);
	box-shadow: 0 6px 14px rgba(var(--hex-primary-rgb), 0.32);
}

.hex-school-classes .hex-classes-add-btn:hover {
	box-shadow: 0 10px 22px -4px rgba(var(--hex-primary-rgb), 0.4) !important;
}

/* کلاس عمومی «تاکید» برای دکمه‌های اصلی/CTA در بخش‌های مختلف افزونه؛ همان
   استایل دکمه‌ی «افزودن کلاس جدید» (فضای داخلی بیشتر + سایه‌ی نرم پالت‌محور)
   با !important، چون این دکمه‌ها هرکدام در بافت‌های متفاوتی با اختصاصیت‌های
   گوناگون رندر می‌شوند و بدون !important به‌راحتی override می‌شدند. رنگ سایه
   از var(--hex-primary-rgb) می‌آید، پس با هر پالتی (سبز/آبی/تیره) هماهنگ است. */
.hex-btn-emphasis,
.hex-btn-emphasis:hover,
.hex-btn-emphasis:focus,
.hex-btn-emphasis:active {
	padding: 14px 22px !important;
	box-shadow: 0 8px 20px -4px rgba(var(--hex-primary-rgb), 0.35) !important;
}

.hex-btn-emphasis:hover {
	box-shadow: 0 10px 22px -4px rgba(var(--hex-primary-rgb), 0.4) !important;
}

.hex-classes-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hex-classes-action-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid transparent;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	text-decoration: none;
	flex: 0 0 auto;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.hex-classes-action-btn .hex-icon {
	width: 15px;
	height: 15px;
}

.hex-classes-action-btn:hover {
	transform: translateY(-1px);
}

.hex-classes-action-btn--view {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

.hex-classes-action-btn--view:hover {
	background: var(--hex-primary-soft-hover);
}

.hex-classes-action-btn--edit {
	background: #fff7ed;
	color: #ea580c;
}

.hex-classes-action-btn--edit:hover {
	background: #ffedd5;
}

.hex-classes-action-btn--timetable {
	background: #eff6ff;
	color: #2563eb;
}

.hex-classes-action-btn--timetable:hover {
	background: #dbeafe;
}

.hex-classes-action-btn--classes {
	background: #f5f3ff;
	color: var(--hex-color-info);
}

.hex-classes-action-btn--classes:hover {
	background: #ede9fe;
}

.hex-classes-action-btn--duplicate {
	background: #ecfdf5;
	color: #059669;
}

.hex-classes-action-btn--duplicate:hover {
	background: #d1fae5;
}

.hex-classes-action-btn--delete {
	background: #fef2f2;
	color: var(--hex-color-error);
}

.hex-classes-action-btn--delete:hover {
	background: var(--hex-color-error-bg);
}

[data-hex-theme="dark"] .hex-classes-action-btn--edit {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
}

[data-hex-theme="dark"] .hex-classes-action-btn--edit:hover {
	background: #4a350f;
}

[data-hex-theme="dark"] .hex-classes-action-btn--timetable {
	background: #17324f;
	color: #60a5fa;
}

[data-hex-theme="dark"] .hex-classes-action-btn--timetable:hover {
	background: #1e3f63;
}

[data-hex-theme="dark"] .hex-classes-action-btn--duplicate {
	background: var(--hex-color-success-bg);
	color: var(--hex-color-success);
}

[data-hex-theme="dark"] .hex-classes-action-btn--duplicate:hover {
	background: #16342a;
}

[data-hex-theme="dark"] .hex-classes-action-btn--delete {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

[data-hex-theme="dark"] .hex-classes-action-btn--delete:hover {
	background: #4a1c1c;
}

[data-hex-theme="dark"] .hex-classes-action-btn--classes {
	background: var(--hex-color-info-bg);
	color: var(--hex-color-info);
}

[data-hex-theme="dark"] .hex-classes-action-btn--classes:hover {
	background: #2f2350;
}

.hex-school-classes .hex-school-pagination a {
	border-radius: 999px;
	min-width: 36px;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hex-school-classes .hex-school-pagination a:hover {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-school-classes .hex-classes-table tbody tr {
	transition: background 0.15s ease;
}

/* ============= بازطراحی «شیک و حرفه‌ای» جدول لیست کلاس‌ها (بخش «کلاس‌ها») =============
   فقط برای همین جدول (کلاس .hex-classes-table) اسکوپ شده تا روی جدول‌های
   عمومی دیگر (hex-school-table در سایر بخش‌ها) اثری نگذارد. */
.hex-classes-table-wrap {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* لیست «سال‌های تحصیلی ثبت‌شده» در تنظیمات شهریه می‌تواند با گذر زمان طولانی
   شود؛ برای اینکه فقط خودِ جدول اسکرول بخورد و کل صفحه اسکرول نشود، این باکس
   ارتفاع محدود می‌گیرد و هدر جدول هم در بالای ناحیهٔ اسکرول‌شونده ثابت می‌ماند. */
.hex-tuition-years-table-wrap {
	max-height: 340px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.hex-tuition-years-table-wrap .hex-classes-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}

.hex-classes-table-wrap .hex-classes-table {
	border-collapse: separate;
	border-spacing: 0;
}

/* هر مرورگر/قالب پیش‌فرضی که احتمالاً خط عمودی بین ستون‌های th/td اضافه
   می‌کند، اینجا صراحتاً خنثی می‌شود؛ فقط خط افقی کمرنگ زیر هر ردیف باقی
   می‌ماند. */
.hex-classes-table-wrap .hex-classes-table th,
.hex-classes-table-wrap .hex-classes-table td {
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

.hex-classes-table-wrap .hex-classes-table thead th {
	/* به‌جای سبز ثابت، به توکن‌های پالت رنگی وصل شد تا با تغییر پالت (روشن/آبی/تیره)
	   هماهنگ بماند؛ رنگ متن هم به‌جای مشکی ثابت به همان الگوی بج «پایه»
	   (var(--hex-primary-dark)) وصل شد تا روی پالت تیره هم خوانا بماند. */
	background: var(--hex-primary-soft-hover);
	color: var(--hex-primary-dark);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 13px 16px;
	border-bottom: 0;
	white-space: nowrap;
}

.hex-classes-table-wrap .hex-classes-table thead th:first-child {
	border-top-right-radius: 14px;
}

.hex-classes-table-wrap .hex-classes-table thead th:last-child {
	border-top-left-radius: 14px;
}

.hex-classes-table-wrap .hex-classes-table tbody td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--hex-border-light);
	background: var(--hex-bg-card);
}

.hex-classes-table-wrap .hex-classes-table tbody tr:nth-child(even) td {
	background: var(--hex-bg-page);
}

.hex-classes-table-wrap .hex-classes-table tbody tr:last-child td {
	border-bottom: 0;
}

.hex-classes-table-wrap .hex-classes-table tbody tr:hover td {
	background: var(--hex-primary-soft);
}

/* عریض‌تر کردن ستون‌های جدول «دانش‌آموزان» و «معلمان» تا نام، کلاس، والد،
   دروس و ... راحت‌تر خوانده شوند و باکس‌های select/بج‌ها جا داشته باشند. */
.hex-students-table th:nth-child(1),
.hex-students-table td:nth-child(1) {
	min-width: 200px;
}

.hex-students-table th:nth-child(2),
.hex-students-table td:nth-child(2) {
	min-width: 200px;
}

.hex-students-table th:nth-child(3),
.hex-students-table td:nth-child(3) {
	min-width: 200px;
}

.hex-students-table th:nth-child(4),
.hex-students-table td:nth-child(4) {
	min-width: 120px;
}

.hex-teachers-table th:nth-child(1),
.hex-teachers-table td:nth-child(1) {
	min-width: 220px;
}

.hex-teachers-table th:nth-child(2),
.hex-teachers-table td:nth-child(2) {
	min-width: 260px;
}

.hex-teachers-table th:nth-child(3),
.hex-teachers-table td:nth-child(3) {
	min-width: 260px;
}

.hex-teachers-table th:nth-child(4),
.hex-teachers-table td:nth-child(4) {
	min-width: 120px;
}

.hex-parents-table th:nth-child(1),
.hex-parents-table td:nth-child(1) {
	min-width: 200px;
}

.hex-parents-table th:nth-child(2),
.hex-parents-table td:nth-child(2) {
	min-width: 130px;
}

.hex-parents-table th:nth-child(3),
.hex-parents-table td:nth-child(3) {
	min-width: 150px;
}

.hex-parents-table th:nth-child(4),
.hex-parents-table td:nth-child(4) {
	min-width: 120px;
}

.hex-parents-table th:nth-child(5),
.hex-parents-table td:nth-child(5) {
	min-width: 90px;
}

.hex-parents-table th:nth-child(6),
.hex-parents-table td:nth-child(6) {
	min-width: 140px;
}

.hex-parents-table th:nth-child(7),
.hex-parents-table td:nth-child(7) {
	min-width: 220px;
}

.hex-tuition-list-table th:nth-child(1),
.hex-tuition-list-table td:nth-child(1) {
	min-width: 170px;
}

.hex-tuition-list-table th:nth-child(2),
.hex-tuition-list-table td:nth-child(2) {
	min-width: 130px;
}

.hex-tuition-list-table th:nth-child(3),
.hex-tuition-list-table td:nth-child(3) {
	min-width: 140px;
}

.hex-tuition-list-table th:nth-child(4),
.hex-tuition-list-table td:nth-child(4) {
	min-width: 220px;
}

.hex-tuition-list-table th:nth-child(5),
.hex-tuition-list-table td:nth-child(5) {
	min-width: 170px;
}

.hex-tuition-list-table th:nth-child(6),
.hex-tuition-list-table td:nth-child(6) {
	min-width: 120px;
}

.hex-class-name-cell {
	font-weight: bold;
	color: var(--hex-text-heading);
}

[data-hex-theme="dark"] .hex-students-table .hex-class-name-cell {
	color: #ffffff;
}

.hex-class-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: bold;
	white-space: nowrap;
}

.hex-class-badge-grade {
	/* به‌جای سبز ثابت، به توکن پالت رنگی وصل شد تا با تغییر پالت (روشن/آبی/تیره) هماهنگ بماند. */
	background: var(--hex-primary-soft-hover);
	color: var(--hex-primary-dark);
}

.hex-class-badge-code {
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-family: monospace, monospace;
	letter-spacing: 0.02em;
}

.hex-class-teacher-cell {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--hex-text-heading);
}

.hex-class-teacher-avatar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	color: var(--hex-bg-card);
	font-size: 12px;
	font-weight: bold;
}

/* چند بج کنار هم (مثلاً چند کلاس یا چند درس یک معلم) داخل یک سلول جدول،
   با wrap روی خطوط بعدی در صورت کمبود جا. */
.hex-badge-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hex-school-details-table {
	margin-bottom: 24px;
	border-collapse: collapse;
}

.hex-school-details-table th,
.hex-school-details-table td {
	padding: 8px 14px;
	text-align: right;
	border-bottom: 1px solid var(--hex-border);
}

.hex-school-details-table th {
	color: var(--hex-primary);
	white-space: nowrap;
}

/* گرید کارتی «اطلاعات کلاس» در صفحه‌ی مشاهده‌ی یک کلاس، به‌جای جدول ساده‌ی
   قبلی؛ هر آیتم یک آیکن گرد با گرادیان ملایم آبی دارد و برچسب/مقدار زیر
   هم نمایش داده می‌شوند. فقط مخصوص همین صفحه است (کلاس‌های خودش را دارد،
   جدول عمومی hex-school-details-table که در بخش‌های دیگر استفاده می‌شود
   دست‌نخورده باقی مانده). */
/* --- باکس نمایش کلاس در صفحه جزئیات دانش‌آموز --- */

.hex-student-class-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-bg-page) 100%);
	border: 1px solid var(--hex-primary-soft-hover);
}

.hex-student-class-box-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	color: var(--hex-bg-card);
	box-shadow: 0 6px 14px rgba(22, 160, 133, 0.22);
}

.hex-student-class-box-icon .hex-icon {
	width: 22px;
	height: 22px;
}

.hex-student-class-box-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.hex-student-class-box-label {
	font-size: 11.5px;
	color: var(--hex-text-secondary);
	font-weight: 600;
}

.hex-student-class-box-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-student-class-box-link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-primary-soft-hover);
	color: var(--hex-primary);
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hex-student-class-box-link:hover {
	background: var(--hex-primary-soft);
	box-shadow: 0 3px 10px rgba(22, 160, 133, 0.18);
	transform: translateY(-1px);
}

.hex-student-class-box-link .hex-icon {
	width: 16px;
	height: 16px;
}

/* --- باکس نمایش والد در صفحه جزئیات دانش‌آموز --- */

.hex-student-parent-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--hex-color-info-bg) 0%, var(--hex-bg-page) 100%);
	border: 1px solid #e0d4f7;
}

.hex-student-parent-box-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hex-color-info) 0%, var(--hex-color-info-light) 100%);
	color: var(--hex-bg-card);
	box-shadow: 0 6px 14px rgba(124, 58, 237, 0.22);
}

.hex-student-parent-box-icon .hex-icon {
	width: 22px;
	height: 22px;
}

.hex-student-parent-box-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.hex-student-parent-box-label {
	font-size: 11.5px;
	color: var(--hex-text-secondary);
	font-weight: 600;
}

.hex-student-parent-box-value {
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-student-parent-box-link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--hex-bg-card);
	border: 1px solid #e0d4f7;
	color: var(--hex-color-info);
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hex-student-parent-box-link:hover {
	background: var(--hex-color-info-bg);
	box-shadow: 0 3px 10px rgba(124, 58, 237, 0.18);
	transform: translateY(-1px);
}

.hex-student-parent-box-link .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-class-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-bottom: 8px;
}

.hex-class-info-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-bg-page) 100%);
	border: 1px solid var(--hex-primary-soft-hover);
	border-radius: 12px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	/* بدون این خط، وقتی متنِ داخل کارت (مثلاً آدرس) طولانی و بدون شکست خط
	   باشد، مرورگر برای محاسبه‌ی عرض این آیتم گرید حداقل عرضِ محتوا (min-content)
	   را در نظر می‌گیرد که با متن طولانیِ nowrap خیلی بزرگ می‌شود؛ همین باعث
	   می‌شد کل ردیف/صفحه به‌جای خودِ کارت اسکرول افقی بخورد. */
	min-width: 0;
}

.hex-class-info-item:hover {
	box-shadow: 0 4px 14px rgba(22, 160, 133, 0.1);
	transform: translateY(-1px);
}

.hex-class-info-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	color: var(--hex-bg-card);
}

/* رنگ متفاوت برای آیکن هر کارت (چرخشی، هم‌خانواده با رنگ‌بندی میانبرهای
   داشبورد) تا کارت‌ها راحت‌تر از هم تفکیک بصری شوند. */
.hex-class-info-item:nth-child(3n+1) .hex-class-info-icon {
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
}

.hex-class-info-item:nth-child(3n+2) .hex-class-info-icon {
	background: linear-gradient(135deg, var(--hex-color-info) 0%, #c084fc 100%);
}

.hex-class-info-item:nth-child(3n+3) .hex-class-info-icon {
	background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
}

.hex-class-info-icon .hex-icon {
	width: 20px;
	height: 20px;
}

/* --- باکس «معلم‌های این کلاس» در صفحه مشاهده کلاس --- */

.hex-class-teachers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.hex-class-teacher-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--hex-bg-page);
	border: 1px solid #e5eaf0;
	border-radius: 12px;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
	min-width: 0;
}

.hex-class-teacher-card:hover {
	box-shadow: 0 4px 14px rgba(22, 160, 133, 0.1);
	border-color: var(--hex-primary-soft-hover);
	transform: translateY(-1px);
}

.hex-class-teacher-avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	font-size: 15px;
}

.hex-class-teacher-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hex-class-teacher-name-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.hex-class-teacher-name {
	font-weight: 600;
	color: var(--hex-text-primary);
	font-size: 13.5px;
}

.hex-class-teacher-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 999px;
	/* به‌جای سبز ثابت، به توکن رنگی پالت (--hex-primary-rgb) وصل شد تا با تغییر پالت (روشن/آبی/تیره) هماهنگ بماند. */
	background: rgba(var(--hex-primary-rgb), 0.12);
	color: var(--hex-primary-dark);
	font-size: 10.5px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-class-teacher-badge .hex-icon {
	width: 11px;
	height: 11px;
}

.hex-class-teacher-subjects {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--hex-text-secondary);
	font-size: 12px;
	line-height: 1.6;
}

.hex-class-teacher-subjects .hex-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
}

/* --- باکس «دانش‌آموزان این کلاس» در صفحه مشاهده کلاس --- */

.hex-class-students-count {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(22, 160, 133, 0.12);
	color: var(--hex-primary-dark);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-class-students-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hex-class-student-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 8px;
	background: var(--hex-bg-page);
	border: 1px solid #e5eaf0;
	border-radius: 999px;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hex-class-student-chip:hover {
	box-shadow: 0 3px 10px rgba(22, 160, 133, 0.1);
	border-color: var(--hex-primary-soft-hover);
	transform: translateY(-1px);
}

.hex-class-student-avatar {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	font-size: 10.5px;
}

.hex-class-student-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hex-text-primary);
	white-space: nowrap;
}

.hex-class-info-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hex-class-info-label {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-class-info-value {
	font-size: 15px;
	font-weight: bold;
	color: var(--hex-text-heading);
	white-space: nowrap;
	max-width: 100%;
	/* به‌جای بریده‌شدن با «...» یا اسکرول‌خوردن کل صفحه، وقتی مقدار (مثل آدرس)
	   از عرض کارت بیشتر شود، فقط همین جعبه به‌صورت افقی اسکرول می‌شود. */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.hex-class-info-value::-webkit-scrollbar {
	height: 5px;
}

.hex-class-info-value::-webkit-scrollbar-thumb {
	background: var(--hex-border-strong);
	border-radius: 8px;
}

.hex-class-info-value::-webkit-scrollbar-track {
	background: transparent;
}

@media (max-width: 600px) {
	.hex-class-info-grid {
		grid-template-columns: 1fr;
	}
}

/* فرم افزودن/ویرایش کلاس — بازطراحی شیک‌تر */
.hex-class-form-panel {
	max-width: 520px;
}

.hex-class-form-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 18px;
	color: var(--hex-text-heading);
}

.hex-class-form-title-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	color: var(--hex-bg-card);
	flex: 0 0 auto;
}

.hex-class-form-title-icon .hex-icon {
	width: 18px;
	height: 18px;
}

#hex-school-class-form p,
#hex-school-subject-form p,
#hex-school-edit-student-form p,
#hex-school-edit-teacher-form p,
#hex-school-edit-parent-form p,
#hex-school-tuition-form p,
#hex-school-tuition-settings-form p,
#hex-school-report-form p,
#hex-school-notification-form p,
#hex-school-general-settings-form p,
#hex-school-attendance-settings-form p,
#hex-school-grades-settings-form p,
#hex-school-founder-settings-form p {
	margin-bottom: 16px;
}

#hex-school-homepage-header-slider-form p,
#hex-school-homepage-articles-form p,
#hex-school-homepage-stats-form p,
#hex-school-homepage-footer-form p,
#hex-school-homepage-cooperation-form p,
#hex-school-homepage-custom-box-form p,
#hex-school-homepage-announcement-form p,
#hex-school-homepage-honors-form p {
	margin-bottom: 16px;
}

#hex-school-class-form label,
#hex-school-subject-form label,
#hex-school-edit-student-form label,
#hex-school-edit-teacher-form label,
#hex-school-edit-parent-form label,
#hex-school-tuition-form label,
#hex-school-tuition-settings-form label,
#hex-school-report-form label,
#hex-school-notification-form label,
#hex-school-general-settings-form label,
#hex-school-attendance-settings-form label:not(.hex-school-checkbox-item),
#hex-school-grades-settings-form label,
#hex-school-founder-settings-form label,
#hex-school-about-settings-form label,
#hex-school-gallery-settings-form label,
#hex-school-essay-exam-settings-form label,
#hex-school-combined-exam-settings-form label,
#hex-school-quiz-settings-form label,
#hex-school-pwa-settings-form label,
#hex-school-homepage-header-slider-form label,
#hex-school-homepage-articles-form label,
#hex-school-homepage-stats-form label:not(.hex-school-checkbox-item),
#hex-school-homepage-footer-form label:not(.hex-school-checkbox-item),
#hex-school-homepage-cooperation-form label:not(.hex-school-checkbox-item),
#hex-school-homepage-custom-box-form label,
#hex-school-homepage-announcement-form label,
#hex-school-homepage-honors-form label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
}

#hex-school-class-form label .hex-icon,
#hex-school-subject-form label .hex-icon,
#hex-school-edit-student-form label .hex-icon,
#hex-school-edit-teacher-form label .hex-icon,
#hex-school-edit-parent-form label .hex-icon,
#hex-school-tuition-form label .hex-icon,
#hex-school-tuition-settings-form label .hex-icon,
#hex-school-report-form label .hex-icon,
#hex-school-notification-form label .hex-icon,
#hex-school-general-settings-form label .hex-icon,
#hex-school-attendance-settings-form label:not(.hex-school-checkbox-item) .hex-icon,
#hex-school-grades-settings-form label .hex-icon,
#hex-school-founder-settings-form label .hex-icon,
#hex-school-about-settings-form label .hex-icon,
#hex-school-gallery-settings-form label .hex-icon,
#hex-school-essay-exam-settings-form label .hex-icon,
#hex-school-combined-exam-settings-form label .hex-icon,
#hex-school-quiz-settings-form label .hex-icon,
#hex-school-pwa-settings-form label .hex-icon,
#hex-school-homepage-header-slider-form label .hex-icon,
#hex-school-homepage-articles-form label .hex-icon,
#hex-school-homepage-stats-form label .hex-icon,
#hex-school-homepage-footer-form label .hex-icon,
#hex-school-homepage-cooperation-form label .hex-icon,
#hex-school-homepage-custom-box-form label .hex-icon,
#hex-school-homepage-announcement-form label .hex-icon,
#hex-school-homepage-honors-form label .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

#hex-school-class-form input[type="text"],
#hex-school-class-form select,
#hex-school-subject-form input[type="text"],
#hex-school-subject-form select,
#hex-school-edit-student-form input[type="text"],
#hex-school-edit-student-form input[type="email"],
#hex-school-edit-student-form select,
#hex-school-edit-teacher-form input[type="text"],
#hex-school-edit-teacher-form input[type="email"],
#hex-school-edit-teacher-form input[type="number"],
#hex-school-edit-teacher-form select,
#hex-school-edit-parent-form input[type="text"],
#hex-school-edit-parent-form input[type="email"],
#hex-school-edit-parent-form select,
#hex-school-tuition-form input[type="text"],
#hex-school-tuition-form input[type="number"],
#hex-school-tuition-form select,
#hex-school-tuition-settings-form input[type="text"],
#hex-school-tuition-settings-form input[type="number"],
#hex-school-tuition-settings-form select,
#hex-school-report-form input[type="text"],
#hex-school-report-form input[type="time"],
#hex-school-report-form select,
#hex-school-report-form textarea,
#hex-school-notification-form input[type="text"],
#hex-school-notification-form textarea,
#hex-school-general-settings-form input[type="text"],
#hex-school-general-settings-form input[type="url"],
#hex-school-general-settings-form textarea,
#hex-school-attendance-settings-form input[type="number"],
#hex-school-grades-settings-form input[type="number"],
#hex-school-founder-settings-form input[type="text"],
#hex-school-founder-settings-form input[type="url"],
#hex-school-founder-settings-form textarea,
#hex-school-about-settings-form textarea,
#hex-school-about-settings-form input[type="url"],
#hex-school-gallery-settings-form input[type="text"],
#hex-school-gallery-settings-form input[type="url"],
#hex-school-essay-exam-settings-form input[type="number"],
#hex-school-combined-exam-settings-form input[type="number"],
#hex-school-quiz-settings-form input[type="number"],
#hex-school-pwa-settings-form input[type="text"],
#hex-school-homepage-header-slider-form input[type="text"],
#hex-school-homepage-header-slider-form input[type="url"],
#hex-school-homepage-articles-form input[type="text"],
#hex-school-homepage-articles-form input[type="url"],
#hex-school-homepage-articles-form textarea,
#hex-school-homepage-stats-form input[type="text"],
#hex-school-homepage-footer-form input[type="text"],
#hex-school-homepage-cooperation-form input[type="text"],
#hex-school-homepage-stats-form input[type="url"],
#hex-school-homepage-footer-form input[type="url"],
#hex-school-homepage-cooperation-form input[type="url"],
#hex-school-homepage-stats-form input[type="email"],
#hex-school-homepage-footer-form input[type="email"],
#hex-school-homepage-cooperation-form input[type="email"],
#hex-school-homepage-stats-form textarea,
#hex-school-homepage-footer-form textarea,
#hex-school-homepage-cooperation-form textarea,
#hex-school-homepage-custom-box-form input[type="text"],
#hex-school-homepage-custom-box-form input[type="url"],
#hex-school-homepage-custom-box-form textarea,
#hex-school-homepage-announcement-form input[type="text"],
#hex-school-homepage-announcement-form textarea,
#hex-school-homepage-honors-form input[type="text"],
#hex-school-homepage-honors-form select {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid #dbe3ec;
	border-radius: 10px;
	background: var(--hex-bg-page);
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#hex-school-report-form textarea,
#hex-school-notification-form textarea,
#hex-school-general-settings-form textarea,
#hex-school-founder-settings-form textarea,
#hex-school-about-settings-form textarea,
#hex-school-homepage-articles-form textarea,
#hex-school-homepage-stats-form textarea,
#hex-school-homepage-footer-form textarea,
#hex-school-homepage-cooperation-form textarea,
#hex-school-homepage-custom-box-form textarea,
#hex-school-homepage-announcement-form textarea {
	resize: vertical;
	line-height: 1.7;
}

#hex-school-class-form input[type="text"]:focus,
#hex-school-class-form select:focus,
#hex-school-subject-form input[type="text"]:focus,
#hex-school-subject-form select:focus,
#hex-school-edit-student-form input[type="text"]:focus,
#hex-school-edit-student-form input[type="email"]:focus,
#hex-school-edit-student-form select:focus,
#hex-school-edit-teacher-form input[type="text"]:focus,
#hex-school-edit-teacher-form input[type="email"]:focus,
#hex-school-edit-teacher-form input[type="number"]:focus,
#hex-school-edit-teacher-form select:focus,
#hex-school-edit-parent-form input[type="text"]:focus,
#hex-school-edit-parent-form input[type="email"]:focus,
#hex-school-edit-parent-form select:focus,
#hex-school-tuition-form input[type="text"]:focus,
#hex-school-tuition-form input[type="number"]:focus,
#hex-school-tuition-form select:focus,
#hex-school-tuition-settings-form input[type="text"]:focus,
#hex-school-tuition-settings-form input[type="number"]:focus,
#hex-school-tuition-settings-form select:focus,
#hex-school-report-form input[type="text"]:focus,
#hex-school-report-form input[type="time"]:focus,
#hex-school-report-form select:focus,
#hex-school-report-form textarea:focus,
#hex-school-notification-form input[type="text"]:focus,
#hex-school-notification-form textarea:focus,
#hex-school-general-settings-form input[type="text"]:focus,
#hex-school-general-settings-form input[type="url"]:focus,
#hex-school-general-settings-form textarea:focus,
#hex-school-attendance-settings-form input[type="number"]:focus,
#hex-school-grades-settings-form input[type="number"]:focus,
#hex-school-founder-settings-form input[type="text"]:focus,
#hex-school-founder-settings-form input[type="url"]:focus,
#hex-school-founder-settings-form textarea:focus,
#hex-school-about-settings-form textarea:focus,
#hex-school-about-settings-form input[type="url"]:focus,
#hex-school-gallery-settings-form input[type="text"]:focus,
#hex-school-gallery-settings-form input[type="url"]:focus,
#hex-school-essay-exam-settings-form input[type="number"]:focus,
#hex-school-combined-exam-settings-form input[type="number"]:focus,
#hex-school-quiz-settings-form input[type="number"]:focus,
#hex-school-pwa-settings-form input[type="text"]:focus,
#hex-school-homepage-header-slider-form input[type="text"]:focus,
#hex-school-homepage-header-slider-form input[type="url"]:focus,
#hex-school-homepage-articles-form input[type="text"]:focus,
#hex-school-homepage-articles-form input[type="url"]:focus,
#hex-school-homepage-articles-form textarea:focus,
#hex-school-homepage-stats-form input[type="text"]:focus,
#hex-school-homepage-footer-form input[type="text"]:focus,
#hex-school-homepage-cooperation-form input[type="text"]:focus,
#hex-school-homepage-stats-form input[type="url"]:focus,
#hex-school-homepage-footer-form input[type="url"]:focus,
#hex-school-homepage-cooperation-form input[type="url"]:focus,
#hex-school-homepage-stats-form input[type="email"]:focus,
#hex-school-homepage-footer-form input[type="email"]:focus,
#hex-school-homepage-cooperation-form input[type="email"]:focus,
#hex-school-homepage-stats-form textarea:focus,
#hex-school-homepage-footer-form textarea:focus,
#hex-school-homepage-cooperation-form textarea:focus,
#hex-school-homepage-custom-box-form input[type="text"]:focus,
#hex-school-homepage-custom-box-form input[type="url"]:focus,
#hex-school-homepage-custom-box-form textarea:focus,
#hex-school-homepage-announcement-form input[type="text"]:focus,
#hex-school-homepage-announcement-form textarea:focus,
#hex-school-homepage-honors-form input[type="text"]:focus,
#hex-school-homepage-honors-form select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

/* شماره کارت مدرسه در تنظیمات شهریه: چیدمان لاتین/اعداد چپ‌به‌راست و فاصله‌ی
   حروف بیشتر، شبیه‌سازی ظاهر یک کارت بانکی برای خوانایی بهتر. */
#hex_tuition_card_number {
	direction: ltr;
	text-align: right;
	font-family: 'Courier New', Consolas, monospace;
	letter-spacing: 1.5px;
}

#hex-school-edit-student-form input[disabled],
#hex-school-edit-teacher-form input[disabled],
#hex-school-edit-parent-form input[disabled] {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-soft);
	color: var(--hex-text-muted);
	font-size: 14px;
}

[data-hex-theme="dark"] #hex-school-edit-student-form input[type="text"],
[data-hex-theme="dark"] #hex-school-edit-student-form input[type="email"],
[data-hex-theme="dark"] #hex-school-edit-student-form select {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-student-form input[disabled] {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-student-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] #hex-school-edit-student-form select option {
	color: #0f172a;
}

[data-hex-theme="dark"] #hex-school-edit-student-form .hex-jalali-date .hex-jalali-year,
[data-hex-theme="dark"] #hex-school-edit-student-form .hex-jalali-date .hex-jalali-day,
[data-hex-theme="dark"] #hex-school-edit-student-form .hex-jalali-date .hex-jalali-month {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-teacher-form input[type="text"],
[data-hex-theme="dark"] #hex-school-edit-teacher-form input[type="email"],
[data-hex-theme="dark"] #hex-school-edit-teacher-form input[type="number"],
[data-hex-theme="dark"] #hex-school-edit-teacher-form select {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-teacher-form input[disabled] {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-teacher-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] #hex-school-edit-teacher-form select option {
	color: #0f172a;
}

[data-hex-theme="dark"] #hex-school-edit-teacher-form .hex-jalali-date .hex-jalali-year,
[data-hex-theme="dark"] #hex-school-edit-teacher-form .hex-jalali-date .hex-jalali-day,
[data-hex-theme="dark"] #hex-school-edit-teacher-form .hex-jalali-date .hex-jalali-month {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-parent-form input[type="text"],
[data-hex-theme="dark"] #hex-school-edit-parent-form input[type="email"],
[data-hex-theme="dark"] #hex-school-edit-parent-form select {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-parent-form input[disabled] {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-edit-parent-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] #hex-school-edit-parent-form select option {
	color: #0f172a;
}

[data-hex-theme="dark"] #hex-school-edit-parent-form .hex-jalali-date .hex-jalali-year,
[data-hex-theme="dark"] #hex-school-edit-parent-form .hex-jalali-date .hex-jalali-day,
[data-hex-theme="dark"] #hex-school-edit-parent-form .hex-jalali-date .hex-jalali-month {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-report-form input[type="text"],
[data-hex-theme="dark"] #hex-school-report-form input[type="time"],
[data-hex-theme="dark"] #hex-school-report-form select,
[data-hex-theme="dark"] #hex-school-report-form textarea {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-report-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] #hex-school-report-form select option {
	color: #0f172a;
}

[data-hex-theme="dark"] #hex-school-report-form .hex-jalali-date .hex-jalali-year,
[data-hex-theme="dark"] #hex-school-report-form .hex-jalali-date .hex-jalali-day,
[data-hex-theme="dark"] #hex-school-report-form .hex-jalali-date .hex-jalali-month {
	color: #ffffff;
}

/* پالت تیره — «ثبت گزارش»: گروه‌های دکمه‌ای جنسیت/محورهای فعالیت/مخاطب
   (رادیو و چک‌باکس‌های پنهان با ظاهر دکمه‌ای) در حالت تیره باید خودشان
   پس‌زمینه و رنگ اختصاصی داشته باشند، وگرنه با پس‌زمینه‌ی روشن پیش‌فرض
   ناخوانا می‌مانند. */
[data-hex-theme="dark"] .hex-reports-form-panel .hex-school-field-label,
[data-hex-theme="dark"] .hex-reports-form-panel .hex-school-checkbox-group-wrap legend {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-reports-form-panel .hex-school-toggle-btn {
	background: var(--hex-bg-card);
	border-color: var(--hex-border-strong);
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-reports-form-panel .hex-school-toggle-input:checked + .hex-school-toggle-btn {
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-notification-form input[type="text"],
[data-hex-theme="dark"] #hex-school-notification-form textarea {
	color: #ffffff;
}

/* پالت تیره — «ارسال اعلان جدید»: گروه دکمه‌ای «گیرندگان اعلان» هم مثل
   گروه‌های مشابه در فرم «ثبت گزارش» به رنگ اختصاصی تیره نیاز دارد. */
[data-hex-theme="dark"] .hex-notification-form-panel .hex-school-field-label,
[data-hex-theme="dark"] .hex-notification-form-panel .hex-school-checkbox-group-wrap legend {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-notification-form-panel .hex-school-toggle-btn {
	background: var(--hex-bg-card);
	border-color: var(--hex-border-strong);
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-notification-form-panel .hex-school-toggle-input:checked + .hex-school-toggle-btn {
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: #ffffff;
}

/* نسخه‌ی دارک — رنگ متن همه‌ی فیلدهای ورودی در تمام زیرتب‌های «تنظیمات»
   (عمومی، موسس، درباره‌ی مدرسه، گالری، حضور و غیاب، کارنامه، شهریه، آزمون
   تشریحی، آزمون جامع، آزمون تستی) سفید می‌شود تا روی پس‌زمینه‌ی تیره‌ی
   فیلدها خوانا باشد. */
[data-hex-theme="dark"] #hex-school-general-settings-form input[type="text"],
[data-hex-theme="dark"] #hex-school-general-settings-form input[type="url"],
[data-hex-theme="dark"] #hex-school-general-settings-form textarea,
[data-hex-theme="dark"] #hex-school-founder-settings-form input[type="text"],
[data-hex-theme="dark"] #hex-school-founder-settings-form input[type="url"],
[data-hex-theme="dark"] #hex-school-founder-settings-form textarea,
[data-hex-theme="dark"] #hex-school-about-settings-form textarea,
[data-hex-theme="dark"] #hex-school-about-settings-form input[type="url"],
[data-hex-theme="dark"] #hex-school-gallery-settings-form input[type="text"],
[data-hex-theme="dark"] #hex-school-gallery-settings-form input[type="url"],
[data-hex-theme="dark"] #hex-school-attendance-settings-form input[type="number"],
[data-hex-theme="dark"] #hex-school-grades-settings-form input[type="number"],
[data-hex-theme="dark"] #hex-school-tuition-settings-form input[type="text"],
[data-hex-theme="dark"] #hex-school-tuition-settings-form input[type="number"],
[data-hex-theme="dark"] #hex-school-essay-exam-settings-form input[type="number"],
[data-hex-theme="dark"] #hex-school-combined-exam-settings-form input[type="number"],
[data-hex-theme="dark"] #hex-school-quiz-settings-form input[type="number"],
[data-hex-theme="dark"] #hex-school-pwa-settings-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-header-slider-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-header-slider-form input[type="url"],
[data-hex-theme="dark"] #hex-school-homepage-articles-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-articles-form input[type="url"],
[data-hex-theme="dark"] #hex-school-homepage-articles-form textarea,
[data-hex-theme="dark"] #hex-school-homepage-stats-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-footer-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-cooperation-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-stats-form input[type="url"],
[data-hex-theme="dark"] #hex-school-homepage-footer-form input[type="url"],
[data-hex-theme="dark"] #hex-school-homepage-cooperation-form input[type="url"],
[data-hex-theme="dark"] #hex-school-homepage-stats-form input[type="email"],
[data-hex-theme="dark"] #hex-school-homepage-footer-form input[type="email"],
[data-hex-theme="dark"] #hex-school-homepage-cooperation-form input[type="email"],
[data-hex-theme="dark"] #hex-school-homepage-stats-form textarea,
[data-hex-theme="dark"] #hex-school-homepage-footer-form textarea,
[data-hex-theme="dark"] #hex-school-homepage-cooperation-form textarea,
[data-hex-theme="dark"] #hex-school-homepage-custom-box-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-custom-box-form input[type="url"],
[data-hex-theme="dark"] #hex-school-homepage-custom-box-form textarea,
[data-hex-theme="dark"] #hex-school-homepage-announcement-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-announcement-form textarea,
[data-hex-theme="dark"] #hex-school-homepage-honors-form input[type="text"],
[data-hex-theme="dark"] #hex-school-homepage-honors-form select {
	color: #ffffff;
}

/* زیرتب «افتخارات» تنظیمات سایت تنها فرم جدید بالاست که select هم دارد
   (انتخاب آیکن)؛ مثل سایر select های پنل در پالت تیره، فلش پیش‌فرض
   مرورگر جایگزین می‌شود چون روی پس‌زمینه‌ی تیره ناخوانا/کم‌کنتراست است. */
[data-hex-theme="dark"] #hex-school-homepage-honors-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] #hex-school-homepage-honors-form select option {
	color: #0f172a;
}

/* فیلد تاریخ (اختیاری) هر ردیف افتخار هم مثل بقیه‌ی فرم‌های دارای فیلد
   تاریخ شمسی، در پالت تیره به رنگ سفید نیاز دارد. */
[data-hex-theme="dark"] #hex-school-homepage-honors-form .hex-jalali-date .hex-jalali-year,
[data-hex-theme="dark"] #hex-school-homepage-honors-form .hex-jalali-date .hex-jalali-day,
[data-hex-theme="dark"] #hex-school-homepage-honors-form .hex-jalali-date .hex-jalali-month {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-pwa-settings-form input[type="text"]::placeholder {
	color: var(--hex-text-muted);
}

[data-hex-theme="dark"] #hex-school-general-settings-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-general-settings-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-general-settings-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-founder-settings-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-founder-settings-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-founder-settings-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-about-settings-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-about-settings-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-gallery-settings-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-gallery-settings-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-tuition-settings-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-header-slider-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-header-slider-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-articles-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-articles-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-articles-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-stats-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-footer-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-cooperation-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-stats-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-footer-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-cooperation-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-stats-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-footer-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-cooperation-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-custom-box-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-custom-box-form input[type="url"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-custom-box-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-announcement-form input[type="text"]::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-announcement-form textarea::placeholder,
[data-hex-theme="dark"] #hex-school-homepage-honors-form input[type="text"]::placeholder {
	color: var(--hex-text-muted);
}

/* فرم «ویرایش دانش‌آموز» فیلدهای بیشتری نسبت به فرم کلاس/درس دارد؛ برای
   همین به‌جای max-width محدود 520px، نسخه‌ی عریض‌تر پنل استفاده می‌شود. */
.hex-class-form-panel--wide {
	max-width: 760px;
}

/* بخش‌بندی فرم ویرایش دانش‌آموز به گروه‌های موضوعی (حساب کاربری / هویتی /
   تحصیلی)، هر گروه یک عنوان کوچک با آیکن دارد و با یک خط کمرنگ از گروه
   قبلی جدا می‌شود. */
.hex-student-edit-section {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--hex-border-light);
}

.hex-student-edit-section:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.hex-student-edit-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hex-primary-dark);
}

.hex-student-edit-section-title .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-primary);
}

/* گرید دوستونه‌ی واکنش‌گرا برای فیلدهای فرم ویرایش دانش‌آموز؛ فیلدهایی که
   باید کل عرض را بگیرند (نام کاربری، آدرس) کلاس hex-grid-full می‌گیرند. */
.hex-student-edit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.hex-student-edit-grid .hex-grid-full {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.hex-student-edit-grid {
		grid-template-columns: 1fr;
	}
}

.hex-class-form-panel .hex-school-form-actions {
	gap: 12px;
	margin-top: 22px;
}

.hex-class-form-panel .hex-school-form-actions .hex-school-btn {
	flex: 1 1 0;
	justify-content: center;
	padding: 11px 18px;
}

/* فرم افزودن/ویرایش طرح شهریه: از همان قالب کارتی .hex-class-form-panel استفاده
   می‌کند، با یک باکس هشدار برای اقساط پرداخت‌شده، نشان (بج) دانش‌آموز به‌جای
   اینپوت غیرفعال، و چیدمان دوستونه‌ی واکنش‌گرا برای فیلدهای مبلغ/تعداد/تاریخ/فاصله. */
.hex-tuition-form-panel {
	max-width: 620px;
}

.hex-tuition-form-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff7ed;
	border: 1px solid #fdba74;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 20px;
}

.hex-tuition-form-notice-icon {
	display: flex;
	flex: 0 0 auto;
	margin-top: 1px;
	color: #ea580c;
}

.hex-tuition-form-notice-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-tuition-form-notice p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: #7c2d12;
}

.hex-tuition-student-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 8px;
	background: var(--hex-primary-soft);
	border: 1px solid var(--hex-primary-soft-hover);
	border-radius: 999px;
}

.hex-tuition-student-avatar.hex-avatar,
.hex-tuition-student-avatar.hex-avatar-initial {
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.hex-tuition-student-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--hex-primary-dark);
}

.hex-tuition-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

@media (max-width: 640px) {
	.hex-tuition-form-grid {
		grid-template-columns: 1fr;
	}
}

.hex-school-form-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.hex-school-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #ffffff;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 6px;
	animation: hex-school-spin 0.8s linear infinite;
}

.hex-send-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	flex: 0 0 auto;
	border-radius: 50%;
}

.hex-send-btn svg {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

.hex-school-frontend-panel .hex-icon {
	display: block;
	flex-shrink: 0;
}

.hex-school-frontend-panel .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes hex-school-spin {
	to {
		transform: rotate(360deg);
	}
}

/* لودر (spinner) عمومی برای تعاملات Ajax روی زمینه روشن: انتخاب کلاس/والد،
   دکمه‌های وضعیت حضور و غیاب، ثبت خودکار نمره و غیره (فاز 9) */
.hex-inline-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--hex-border-strong);
	border-top-color: var(--hex-primary);
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 6px;
	animation: hex-school-spin 0.8s linear infinite;
}

/* ================= ریسپانسیو کردن پنل (فاز 9) ================= */

/* روی صفحه‌های کوچک، به‌جای بهم‌ریختن چیدمان جدول‌ها، ناحیه نمایش به‌صورت
   افقی اسکرول می‌شود (بدون تغییر در ساختار داخلی جدول‌ها) */
@media (max-width: 782px) {
	.hex-school-view {
		overflow-x: auto;
		max-width: 100%;
	}

	.hex-school-view table {
		min-width: 560px;
	}

	/* جدول ثبت نمرات درسی: راه‌حل اسکرول افقی (چه با عرض ۹۰٪ و چه ۱۰۰٪) در
	   عمل روی موبایل قابل اعتماد نبود؛ چون این جدول در تگ‌های اصلی صفحه
	   (نه در یک iframe مجزا) با پنل کلی راست‌به‌چین رندر می‌شود، بعضی مرورگرهای
	   موبایل موقعیت اولیه اسکرول افقی را اشتباه (از چپ به‌جای راست) محاسبه
	   می‌کنند؛ همین باعث می‌شد کل صفحه با فاصله‌ی خالی از چپ نمایش داده شود و
	   حتی منوی کشویی (که باید کاملاً مخفی باشد) هنگام اسکرول کردن نمایان شود.
	   راه‌حل قطعی: به‌جای اسکرول افقی، جدول را در موبایل به فهرستی از
	   کارت‌های عمودی (هر دانش‌آموز یک کارت) تبدیل می‌کنیم؛ این‌طور هیچ عرضی
	   بیشتر از صفحه نمی‌شود و اصلاً نیازی به اسکرول افقی نیست. */
	.hex-school-grades-lessons-entry {
		width: 100%;
		max-width: 100%;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table,
	.hex-school-grades-lessons-entry .hex-school-grades-table thead,
	.hex-school-grades-lessons-entry .hex-school-grades-table tbody,
	.hex-school-grades-lessons-entry .hex-school-grades-table tr,
	.hex-school-grades-lessons-entry .hex-school-grades-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table tr {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 12px;
		border: 1px solid var(--hex-border-light);
		border-radius: 16px;
		padding: 14px 16px;
		background: var(--hex-bg-card);
		box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table td {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table td:first-child {
		width: 100%;
		padding-bottom: 12px;
		margin-bottom: 12px;
		border-bottom: 1px solid var(--hex-border-light);
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table td:nth-child(2),
	.hex-school-grades-lessons-entry .hex-school-grades-table td:nth-child(3) {
		flex: 1 1 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table td:nth-child(3) {
		padding-inline-start: 14px;
		margin-inline-start: 2px;
		border-inline-start: 1px solid var(--hex-border-light);
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table td:nth-child(4) {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table td:not(:first-child):not(.hex-school-no-print)::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 600;
		color: var(--hex-text-muted);
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table .hex-grade-student-avatar.hex-avatar,
	.hex-school-grades-lessons-entry .hex-school-grades-table .hex-grade-student-avatar.hex-avatar-initial {
		width: 40px;
		height: 40px;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table .hex-grade-student-name {
		font-size: 14.5px;
	}

	.hex-school-grades-lessons-entry .hex-school-grades-table .hex-lesson-score-input {
		width: 100%;
		max-width: 130px;
	}

	/* همان راه‌حل کارت عمودی برای جدول «ثبت نمرات ترم» (تب امتحانی) نیز
	   اعمال می‌شود؛ این جدول در تگ hex-school-grades-entry> رندر می‌شود
	   (نه hex-school-grades-lessons-entry>) اما ساختار ستون‌هایش مشابه است. */
	.hex-school-grades-entry .hex-school-grades-table,
	.hex-school-grades-entry .hex-school-grades-table thead,
	.hex-school-grades-entry .hex-school-grades-table tbody,
	.hex-school-grades-entry .hex-school-grades-table tr,
	.hex-school-grades-entry .hex-school-grades-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.hex-school-grades-entry .hex-school-grades-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* کارت مدرن هر دانش‌آموز در موبایل: ردیف بالا (آواتار+نام) با یک
	   جداکننده از ردیف پایین که «نمره» و «معادل» را دو ستون کنار هم
	   نمایش می‌دهد (نه به‌شکل قدیمی برچسب:مقدار در خط‌های جدا). */
	.hex-school-grades-entry .hex-school-grades-table tr {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 12px;
		border: 1px solid var(--hex-border-light);
		border-radius: 16px;
		padding: 14px 16px;
		background: var(--hex-bg-card);
		box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
	}

	.hex-school-grades-entry .hex-school-grades-table td {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.hex-school-grades-entry .hex-school-grades-table td:first-child {
		width: 100%;
		padding-bottom: 12px;
		margin-bottom: 12px;
		border-bottom: 1px solid var(--hex-border-light);
	}

	.hex-school-grades-entry .hex-school-grades-table td:nth-child(2),
	.hex-school-grades-entry .hex-school-grades-table td:nth-child(3) {
		flex: 1 1 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.hex-school-grades-entry .hex-school-grades-table td:nth-child(3) {
		padding-inline-start: 14px;
		margin-inline-start: 2px;
		border-inline-start: 1px solid var(--hex-border-light);
	}

	.hex-school-grades-entry .hex-school-grades-table td:not(:first-child)::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 600;
		color: var(--hex-text-muted);
	}

	.hex-school-grades-entry .hex-school-grades-table .hex-grade-student-avatar.hex-avatar,
	.hex-school-grades-entry .hex-school-grades-table .hex-grade-student-avatar.hex-avatar-initial {
		width: 40px;
		height: 40px;
	}

	.hex-school-grades-entry .hex-school-grades-table .hex-grade-student-name {
		font-size: 14.5px;
	}

	.hex-school-grades-entry .hex-school-grades-table .hex-grade-score-input {
		width: 100%;
		max-width: 130px;
	}

	.hex-grades-entry-card {
		padding: 14px;
	}

	.hex-grades-entry-head {
		flex-wrap: wrap;
	}

	.hex-grades-entry-count {
		order: 3;
		margin-inline-start: 54px;
	}

	/* جدول لیست کلاس‌ها (بخش «کلاس‌ها») قبلاً به‌صورت کارت عمودی نمایش داده
	   می‌شد؛ حالا طبق همان الگوی جدول دانش‌آموزان/کاربران، به یک جدول واقعی
	   با اسکرول افقی محدود به خودش (باکس .hex-school-table-scroll دور آن در
	   PHP) تبدیل شده، بدون هیچ override دیزاینی اضافه‌ای در اینجا. */

	/* جدول لیست دروس (بخش «دروس») حالا دقیقاً از همان کلاس «hex-classes-table»
	   جدول کلاس‌ها استفاده می‌کند (بازطراحی یکسان: باکس hex-classes-panel +
	   اسکرول افقی محدود hex-school-table-scroll)، پس دیگر نیازی به override
	   جداگانه‌ی کارتی برای آن نیست. */

	/* جدول تاریخچه‌ی تب «گزارش» حضور و غیاب حالا دقیقاً از همان کلاس
	   «hex-classes-table» جدول کلاس‌ها استفاده می‌کند (بازطراحی یکسان: باکس
	   hex-classes-panel + اسکرول افقی محدود hex-school-table-scroll)، پس
	   دیگر نیازی به override کارتی جداگانه برای آن نیست. */

	/* بخش «شهریه»: دو جدول اقساط (قابل‌ویرایش برای مدیر، و فقط-خواندنی برای
	   دانش‌آموز/والد) با همون قاعده‌ی «قانون عمومی min-width:560px قوی‌تر از
	   یک کلاس تنهاست» که در بخش‌های قبلی توضیح داده شد، زیر کلاس والد
	   «.hex-school-tuition» با همون الگوی کارت عمودی بازسازی شده‌اند.
	   جدول لیست طرح‌های شهریه (.hex-tuition-list-table) از این قاعده مستثناست:
	   از فاز 17 دقیقاً مثل جدول کلاس‌ها (.hex-classes-table) به‌صورت جدول واقعی
	   با اسکرول افقی محدود (.hex-classes-table-wrap) نمایش داده می‌شود. */
	/* بخش «شهریه»: جدول اقساط فقط-خواندنی دانش‌آموز/والد با همون قاعده‌ی «قانون
	   عمومی min-width:560px قوی‌تر از یک کلاس تنهاست» که در بخش‌های قبلی توضیح
	   داده شد، زیر کلاس والد «.hex-school-tuition» با همون الگوی کارت عمودی
	   بازسازی شده است.
	   جدول لیست طرح‌های شهریه (.hex-tuition-list-table) و جدول اقساط مدیریتی
	   (.hex-tuition-installments-table) از این قاعده مستثنا هستند: از فاز 17-18
	   دقیقاً مثل جدول کلاس‌ها (.hex-classes-table) به‌صورت جدول واقعی با اسکرول
	   افقی محدود (.hex-classes-table-wrap) نمایش داده می‌شوند. */
	.hex-school-tuition .hex-tuition-installments-view-table,
	.hex-school-tuition .hex-tuition-installments-view-table thead,
	.hex-school-tuition .hex-tuition-installments-view-table tbody,
	.hex-school-tuition .hex-tuition-installments-view-table tr,
	.hex-school-tuition .hex-tuition-installments-view-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.hex-school-tuition .hex-tuition-installments-view-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.hex-school-tuition .hex-tuition-installments-view-table tr {
		margin-bottom: 12px;
		border: 1px solid var(--hex-border);
		border-radius: 8px;
		padding: 8px 12px;
		background: var(--hex-bg-card);
		box-sizing: border-box;
	}

	.hex-school-tuition .hex-tuition-installments-view-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 0;
		border: 0;
		border-bottom: 1px solid var(--hex-border-light);
		text-align: left;
	}

	.hex-school-tuition .hex-tuition-installments-view-table td:last-child {
		border-bottom: 0;
	}

	.hex-school-tuition .hex-tuition-installments-view-table td::before {
		content: attr(data-label);
		font-weight: bold;
		color: var(--hex-primary);
		flex: 0 0 auto;
	}

	/* جدول اطلاعات خلاصه (مبلغ کل/پرداخت‌شده/مانده) هم همون
	   «.hex-school-details-table» عمومی است؛ دقیقاً با همون الگوی
	   برچسب/مقدارِ استفاده‌شده در بخش کارنامه (ردیف th/td کنار هم با
	   space-between) بازسازی شده. */
	.hex-school-tuition .hex-school-details-table,
	.hex-school-tuition .hex-school-details-table tbody,
	.hex-school-tuition .hex-school-details-table tr,
	.hex-school-tuition .hex-school-details-table th,
	.hex-school-tuition .hex-school-details-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.hex-school-tuition .hex-school-details-table {
		margin-bottom: 16px;
	}

	.hex-school-tuition .hex-school-details-table tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 0;
		border-bottom: 1px solid var(--hex-border-light);
	}

	.hex-school-tuition .hex-school-details-table th,
	.hex-school-tuition .hex-school-details-table td {
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.hex-school-tuition .hex-school-details-table th {
		flex: 0 0 auto;
	}

	/* توجه: جدول ریز نمرات کارنامه (.hex-report-card-table) دیگر به کارت
	   عمودی تبدیل نمی‌شود؛ از همان الگوی جدول واقعی با اسکرول افقی محدود
	   به خودش استفاده می‌کند که جدول «کلاس‌ها» (.hex-classes-table-wrap)
	   استفاده می‌کند، پس نیازی به قوانین اختصاصی اینجا نیست.

	   جدول بالای کارنامه (نام دانش‌آموز / کلاس) هم همان جدول ساده‌ی
	   «.hex-school-details-table» است که در جاهای دیگر پنل هم استفاده
	   می‌شود؛ چون min-width:560px عمومی روی آن هم اثر می‌گذاشت، اینجا هم
	   به همان شکلِ کارتی (برچسب/مقدار) تبدیلش می‌کنیم تا با بقیه‌ی بخش
	   کارنامه هماهنگ و کاملاً درون عرض موبایل باشد. */
	.hex-school-report-card .hex-report-card-profile {
		width: 100%;
		box-sizing: border-box;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.hex-school-report-card .hex-report-card-profile .hex-school-details-table,
	.hex-school-report-card .hex-report-card-profile .hex-school-details-table tbody,
	.hex-school-report-card .hex-report-card-profile .hex-school-details-table tr,
	.hex-school-report-card .hex-report-card-profile .hex-school-details-table th,
	.hex-school-report-card .hex-report-card-profile .hex-school-details-table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.hex-school-report-card .hex-report-card-profile .hex-school-details-table {
		margin-bottom: 0;
	}

	.hex-school-report-card .hex-report-card-profile .hex-school-details-table tr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 0;
		border-bottom: 1px solid var(--hex-border-light);
	}

	.hex-school-report-card .hex-report-card-profile .hex-school-details-table th,
	.hex-school-report-card .hex-report-card-profile .hex-school-details-table td {
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.hex-school-report-card .hex-report-card-profile .hex-school-details-table th {
		flex: 0 0 auto;
	}

	.hex-school-report-card .hex-report-card-letterhead {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.hex-school-report-card .hex-report-card-title {
		justify-content: center;
		text-align: center;
	}

	/* باکس‌های «معدل کلی» و «رتبه در کلاس»: با min-width:0 مطمئن می‌شویم
	   حتی اگر متن یا مقدار داخلشان طولانی باشد، آیتم‌های فلکس امکان
	   جمع‌شدن پیدا می‌کنند و از عرض صفحه بیرون نمی‌زنند؛ همچنین هر باکس
	   تمام عرض را می‌گیرد تا در موبایل زیر هم و خوانا باشند. */
	.hex-school-report-card .hex-report-card-summary-item {
		flex: 1 1 100%;
		min-width: 0;
		box-sizing: border-box;
	}
}

@media (max-width: 600px) {
	/* توجه: این padding-bottom نباید ۱۶px شود؛ چون در بریک‌پوینت ۷۸۲px (که
	   این بریک‌پوینت ۶۰۰px هم داخل آن است) نوار ناوبری شناور پایین
	   (.hex-school-bottom-nav) نمایش داده می‌شود و برای همان به فضای خالی
	   ۱۰۵px نیاز است؛ در غیر این صورت (padding shorthand قبلی) آخرین
	   آیتم/دکمه‌ی صفحاتی مثل داشبورد، کلاس‌ها، دروس، دانش‌آموزان، معلم‌ها،
	   والدین و فرم‌های ثبت‌نام (دانش‌آموز/معلم/والد) زیر این نوار پنهان
	   می‌شد. */
	.hex-school-view {
		padding: 16px 16px 105px;
	}

	.hex-school-form-actions {
		flex-wrap: wrap;
	}

	.hex-school-form-actions .hex-school-btn:not(.hex-send-btn) {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}

	.hex-school-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	/* روی موبایل، دکمه‌ی «افزودن کلاس جدید» (و مشابه‌های آن) کل عرض را می‌گیرد؛
	   بدون این قانون، محتوای داخلش (آیکن+متن) به‌جای وسط‌چین شدن به یک سمت
	   می‌چسبید و اگر جا کم می‌آورد متن به خط بعد می‌شکست. */
	.hex-school-toolbar .hex-school-btn {
		justify-content: center;
		white-space: nowrap;
	}

	/* دکمه‌های «افزودن امتحان»، «پرینت برنامه» و «دانلود برنامه» (بخش برنامه
	   امتحانی) روی موبایل به‌جای چسبیدن به یک سمت، وسط‌چین می‌شوند و کمی
	   کوچک‌تر می‌شوند تا هر سه در یک ردیف افقی جا شوند. */
	.hex-exam-toolbar-actions {
		width: 100%;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 6px;
		margin-inline-start: 0;
	}

	.hex-exam-toolbar-actions .hex-school-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 7px 8px;
		gap: 4px;
		font-size: 12px;
	}

	.hex-exam-toolbar-actions .hex-icon {
		width: 13px;
		height: 13px;
		flex: 0 0 auto;
	}

	/* منوی کشویی «انتخاب کلاس» در بخش برنامه امتحانی: روی موبایل به‌جای
	   وسط‌چین شدن در وسط صفحه، کل عرض نوار ابزار را می‌گیرد تا لمس و
	   استفاده از آن راحت‌تر باشد. */
	.hex-exam-class-switcher {
		width: 100%;
	}

	.hex-exam-class-switcher .hex-school-search-form {
		align-items: stretch;
	}

	.hex-exam-class-switcher select {
		width: 100%;
	}

	/* روی صفحات خیلی کوچک، فیلدهای فرم‌های فیلتر/جستجو (کلاس، درس، تاریخ، نمره از و ...)
	   به‌جای اینکه در یک ردیف افقی جمع نشوند و از صفحه بیرون بزنند، هرکدام تمام عرض
	   را می‌گیرند و زیر هم قرار می‌گیرند. */
	.hex-school-search-form {
		flex-direction: column;
		align-items: stretch;
	}

	.hex-school-search-form select,
	.hex-school-search-form input {
		width: 100%;
	}

	/* در صفحات کوچک، دکمه‌های وضعیت (حضور/غیاب/تاخیر/مرخصی) کمی جمع‌وجورتر می‌شوند
	   تا هر ۴ حالت در یک ردیف افقی جا شوند و لازم به کشیدن اسکرول افقی جدول نباشد. */
	.hex-att-status-btn {
		padding: 4px 6px;
		font-size: 11px;
	}

	.hex-att-status-group {
		gap: 4px;
	}

	/* نوار ابزار انتخاب کلاس/تاریخ/دانش‌آموز (بخش حضور و غیاب): روی موبایل
	   به‌جای وسط‌چین شدن، هر فیلد به‌همراه select آن کل عرض را می‌گیرد. */
	.hex-school-attendance .hex-att-select-form {
		align-items: stretch;
	}

	.hex-school-attendance .hex-att-select-field {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.hex-school-attendance .hex-att-select-field select,
	.hex-school-attendance .hex-att-select-field input[type="text"] {
		width: 100%;
	}
}

/* ================= بازطراحی «شیک و حرفه‌ای» بخش «حضور و غیاب» =================
   ساختار و کلاس‌های بصری این بخش (hex-classes-panel + hex-classes-table-wrap +
   hex-classes-table) دقیقاً همان‌هایی است که در بخش «کلاس‌ها» استفاده شده تا
   دو بخش کاملاً هم‌راستا و یکدست دیده شوند؛ استایل‌های زیر فقط مخصوصِ عناصر
   اختصاصی این بخش (نوار ابزار، دکمه‌های وضعیت، بج‌ها و نمودار خلاصه) هستند. */

/* --- نوار ابزار (انتخاب کلاس/تاریخ/دانش‌آموز) --- */

.hex-att-toolbar {
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.hex-att-select-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.hex-att-select-field {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hex-att-select-field label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
	white-space: nowrap;
}

.hex-att-select-field label .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-att-select-field select,
.hex-att-select-field input[type="text"] {
	padding: 9px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	font-family: inherit;
	font-size: 14px;
	min-width: 170px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-att-select-field select:hover,
.hex-att-select-field input[type="text"]:hover {
	border-color: var(--hex-primary-light);
}

.hex-att-select-field select:focus,
.hex-att-select-field input[type="text"]:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba( 26, 188, 156, 0.15 );
}

/* --- دکمه‌های وضعیت (حاضر/غایب/تاخیر/مرخصی)، به‌شکل قرص --- */

.hex-att-status-group {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	width: max-content;
}

.hex-att-status-btn {
	border: 1px solid var(--hex-border);
	background: var(--hex-bg-page);
	color: var(--hex-btn-secondary-text);
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hex-att-status-btn:hover {
	border-color: var(--hex-primary-light);
	transform: translateY( -1px );
}

.hex-att-status-btn:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.hex-att-status-btn.is-active.hex-att-status-present {
	background: linear-gradient( 135deg, var(--hex-color-success-light), var(--hex-color-success) );
	border-color: var(--hex-color-success);
	color: var(--hex-text-on-primary);
	box-shadow: 0 3px 8px rgba( 22, 163, 74, 0.28 );
}

.hex-att-status-btn.is-active.hex-att-status-absent {
	background: linear-gradient( 135deg, var(--hex-color-error-light), var(--hex-color-error) );
	border-color: var(--hex-color-error);
	color: var(--hex-text-on-primary);
	box-shadow: 0 3px 8px rgba( 220, 38, 38, 0.28 );
}

.hex-att-status-btn.is-active.hex-att-status-late {
	background: linear-gradient( 135deg, var(--hex-color-warning-light), var(--hex-color-warning) );
	border-color: var(--hex-color-warning);
	color: var(--hex-text-on-primary);
	box-shadow: 0 3px 8px rgba( 245, 158, 11, 0.28 );
}

.hex-att-status-btn.is-active.hex-att-status-excused {
	background: linear-gradient( 135deg, var(--hex-primary-light), var(--hex-primary) );
	border-color: var(--hex-primary);
	color: var(--hex-text-on-primary);
	box-shadow: 0 3px 8px rgba( 22, 160, 133, 0.28 );
}

.hex-att-note-input {
	width: 100%;
	max-width: 220px;
	padding: 6px 12px;
	border: 1px solid var(--hex-border);
	border-radius: 999px;
	background: var(--hex-bg-page);
	font-size: 12.5px;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-att-note-input:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba( 26, 188, 156, 0.15 );
}

/* پالت تیره — حضور و غیاب: متن+آیکن منوی کشویی «انتخاب کلاس» و متن ورودی
   «یادداشت معلم» سفید شود (مقادیرشان با پس‌زمینه‌ی تیره ناخوانا بود). */
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_att_class_select"],
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_att_class_select"] .hex-icon,
[data-hex-theme="dark"] #hex_att_class_select,
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_att_report_class"],
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_att_report_class"] .hex-icon,
[data-hex-theme="dark"] #hex_att_report_class,
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_att_report_student"],
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_att_report_student"] .hex-icon,
[data-hex-theme="dark"] #hex_att_report_student {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-att-note-input {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-att-note-input::placeholder {
	color: var(--hex-text-muted);
}

/* پالت تیره — حضور و غیاب: هدر جدول ثبت/گزارش حضور (پس‌زمینه‌ی سبز ملایم)
   با رنگ متن var(--hex-primary-dark) در پالت تیره خودش هم تیره است و روی آن
   پس‌زمینه به‌سختی خوانده می‌شود؛ فقط در پالت تیره به سفید تغییر کرد. */
[data-hex-theme="dark"] .hex-attendance-table-wrap .hex-classes-table thead th {
	color: #ffffff;
}

/* پالت تیره — سرتیتر جدول‌های عمومی «hex-classes-table» (از جمله لیست
   آزمون‌های تستی، تشریحی و جامع): همان مشکل «تیره روی تیره» که برای جدول
   حضور و غیاب رفع شد، اینجا هم وجود دارد؛ چون رنگ متن پیش‌فرض این هدرها
   var(--hex-primary-dark) است که در پالت تیره خودش تیره است و روی پس‌زمینه‌ی
   var(--hex-primary-soft-hover) به‌سختی خوانده می‌شود. برای عمومی بودن، این
   قانون به‌جای محدود شدن به یک بخش خاص، روی همه‌ی جاهایی که از همین کلاس
   استفاده می‌کنند (از جمله آزمون‌ها) اعمال می‌شود. */
[data-hex-theme="dark"] .hex-classes-table-wrap .hex-classes-table thead th {
	color: #ffffff;
}

/* پالت تیره — حضور و غیاب: نشان (badge) وضعیت «مرخصی» در گزارش هم از همان
   ترکیب تیره‌روی‌تیره رنج می‌برد؛ رنگ متن به var(--hex-primary-light) که
   روشن‌تر است تغییر کرد تا مثل بقیه‌ی وضعیت‌ها (حاضر/غایب/تأخیر) خوانا شود. */
[data-hex-theme="dark"] .hex-att-badge.hex-att-status-excused {
	color: var(--hex-primary-light);
}

/* پالت تیره — لیست کلاس‌ها: نشان (badge) «پایه» هم از همون ترکیب
   تیره‌روی‌تیره رنج می‌برد (رنگ متن var(--hex-primary-dark) روی پس‌زمینه‌ی
   var(--hex-primary-soft-hover))؛ رنگ متن به var(--hex-primary-light) که
   روشن‌تر است تغییر کرد تا خوانا شود. */
[data-hex-theme="dark"] .hex-class-badge-grade {
	color: var(--hex-primary-light);
}

/* پالت تیره — رفع همگانی همون مشکل «تیره‌روی‌تیره»: هر جای دیگه‌ی افزونه که
   از همین ترکیبِ متن var(--hex-primary-dark) روی پس‌زمینه‌ی ملایمِ برند
   (var(--hex-primary-soft) / var(--hex-primary-soft-hover)) استفاده می‌کنه،
   دقیقاً همین ناخوانایی رو داره؛ همه‌شون هم مثل مواردِ بالا با
   var(--hex-primary-light) درست شدن. شامل: آیکن دکمه‌های «بازگشت» (لیست
   کلاس‌ها و پروفایل)، دکمه‌ی «مشاهده» ردیف کلاس، سال تحصیلی کارنامه، آیتم
   انتخاب‌شده‌ی تعطیلات، بج کلاس/شمارنده‌ی دروس در ویرایش معلم، هدر جدول
   گزارش‌ها، بج «گزارش فعالیت»، بج نمره‌ی خنثای انضباطی، آیکن آمار «ورود»
   و بج «غیبت موجه» در پروفایل، نوع آزمون در پاپ‌آپ، بج وضعیت «فعال»
   نظرسنجی، تایمر آزمون تستی، و شماره‌ی مراحل نصب PWA. */
[data-hex-theme="dark"] .hex-classes-back-link--icon-only,
[data-hex-theme="dark"] .hex-classes-back-link--icon-only:hover,
[data-hex-theme="dark"] .hex-profile-back-link-icon,
[data-hex-theme="dark"] .hex-profile-back-link:hover .hex-profile-back-link-icon,
[data-hex-theme="dark"] .hex-profile-back-link:focus-visible .hex-profile-back-link-icon,
[data-hex-theme="dark"] .hex-classes-action-btn--view,
[data-hex-theme="dark"] .hex-report-card-academic-year,
[data-hex-theme="dark"] .hex-attendance-holiday-item:has(input:checked),
[data-hex-theme="dark"] .hex-edit-teacher-chip,
[data-hex-theme="dark"] .hex-edit-teacher-subject-counter,
[data-hex-theme="dark"] .hex-reports-table-wrap .hex-reports-table thead th,
[data-hex-theme="dark"] .hex-report-type-activity,
[data-hex-theme="dark"] .hex-discipline-score-badge.is-neutral,
[data-hex-theme="dark"] .hex-profile-activity-stat--login .hex-profile-activity-stat-icon,
[data-hex-theme="dark"] .hex-profile-attendance-stat--excused,
[data-hex-theme="dark"] .hex-profile-attendance-stat--excused .hex-profile-attendance-stat-icon,
[data-hex-theme="dark"] .hex-new-exam-popup-item-type,
[data-hex-theme="dark"] .hex-survey-status-badge.hex-survey-status-active,
[data-hex-theme="dark"] .hex-quiz-timer,
[data-hex-theme="dark"] .hex-school-pwa-install-steps .hex-school-pwa-install-step-num {
	color: var(--hex-primary-light);
}

/* پالت تیره — مهارت‌ها: متن+آیکن منوی کشویی «انتخاب کلاس»، رنگ نام
   دانش‌آموز روی دکمه‌های لیست، و عنوان «مهارت‌های ثبت‌شده» با پس‌زمینه‌ی
   تیره ناخوانا بودند. */
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_skills_class_select"],
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_skills_class_select"] .hex-icon,
[data-hex-theme="dark"] #hex_skills_class_select {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-skills-student-name {
	color: var(--hex-primary-light);
}

[data-hex-theme="dark"] .hex-skills-records-title {
	color: #ffffff;
}

/* پالت تیره — موارد انضباطی: متن+آیکن هر دو کادر «انتخاب کلاس» (فرم ثبت و
   فرم فیلتر لیست موارد ثبت‌شده) و عنوان «موارد انضباطی ثبت‌شده» با
   پس‌زمینه‌ی تیره ناخوانا بودند. */
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_discipline_class_select"],
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_discipline_class_select"] .hex-icon,
[data-hex-theme="dark"] #hex_discipline_class_select,
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_discipline_records_class_select"],
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_discipline_records_class_select"] .hex-icon,
[data-hex-theme="dark"] #hex_discipline_records_class_select {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-discipline-records-title {
	color: #ffffff;
}

/* پالت تیره — موارد قرآنی: متن+آیکن کادر «انتخاب کلاس»، عنوان «موارد
   قرآنی ثبت‌شده»، و رنگ نام دانش‌آموز روی دکمه‌های لیست با پس‌زمینه‌ی
   تیره ناخوانا بودند. */
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_quran_class_select"],
[data-hex-theme="dark"] .hex-att-select-field label[for="hex_quran_class_select"] .hex-icon,
[data-hex-theme="dark"] #hex_quran_class_select {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-quran-records-title {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-quran-student-name {
	color: #4ade80;
}

/* روی موبایل، فیلدهای «انتخاب کلاس» و «تاریخ» بخش حضور و غیاب تمام عرض
   نوار ابزار را بگیرند (به‌همراه box-sizing:border-box تا با padding داخلی
   از عرض کادر بیرون نزنند). */
@media (max-width: 600px) {
	.hex-school-attendance .hex-att-select-field select,
	.hex-school-attendance .hex-att-select-field .hex-jalali-date {
		width: 100%;
		box-sizing: border-box;
	}
}

/* --- بج وضعیت (جدول تاریخچه) --- */

.hex-att-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: bold;
	white-space: nowrap;
}

.hex-att-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.hex-att-badge.hex-att-status-present {
	background: var(--hex-color-success-bg);
	color: var(--hex-color-success);
}

.hex-att-badge.hex-att-status-absent {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-att-badge.hex-att-status-late {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning-text);
}

.hex-att-badge.hex-att-status-excused {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

/* --- نمودار خلاصه (تب گزارش) --- */

.hex-att-chart {
	margin: 4px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
}

.hex-att-chart-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hex-att-chart-label {
	width: 70px;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--hex-text-heading);
}

.hex-att-chart-bar-wrap {
	flex: 1;
	background: var(--hex-bg-soft);
	border-radius: 999px;
	overflow: hidden;
	height: 16px;
	box-shadow: inset 0 1px 2px rgba( 15, 23, 42, 0.06 );
}

.hex-att-chart-bar {
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

.hex-att-chart-bar.hex-att-status-present {
	background: linear-gradient( 90deg, var(--hex-color-success-light), var(--hex-color-success) );
}

.hex-att-chart-bar.hex-att-status-absent {
	background: linear-gradient( 90deg, var(--hex-color-error-light), var(--hex-color-error) );
}

.hex-att-chart-bar.hex-att-status-late {
	background: linear-gradient( 90deg, var(--hex-color-warning-light), var(--hex-color-warning) );
}

.hex-att-chart-bar.hex-att-status-excused {
	background: linear-gradient( 90deg, var(--hex-primary-light), var(--hex-primary) );
}

.hex-att-chart-value {
	width: 90px;
	flex-shrink: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hex-text-secondary);
	text-align: left;
}

.hex-school-attendance-table td {
	vertical-align: middle;
}

/* --- عنوان و آواتار بخش «گزارش» --- */

.hex-att-report-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 0;
	font-size: 17px;
}

.hex-att-report-avatar {
	width: 34px;
	height: 34px;
	font-size: 14px;
}

/* در نسخه‌ی موبایل، عنوان «گزارش حضور و غیاب: نام دانش‌آموز» باقی می‌ماند
   (حذف نمی‌شود) اما سایز فونتش کوچک‌تر می‌شود تا در صفحه‌ی باریک بهتر جا
   شود و به چند خط نشکند؛ آواتار کنارش هم متناسب کمی کوچک‌تر شد. */
@media (max-width: 600px) {
	.hex-att-report-title {
		font-size: 14px;
		gap: 8px;
	}

	.hex-att-report-avatar {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}
}

/* ===================== کارنامه و نمرات (فاز 7) ===================== */

.hex-school-grades-table td {
	vertical-align: middle;
}

/* --- کارت مدرن تب «ثبت نمرات ترم» --- */

.hex-grades-entry-card {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.hex-grades-entry-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hex-border-light);
}

.hex-grades-entry-head-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient( 135deg, var(--hex-primary-light), var(--hex-primary) );
	color: var(--hex-text-on-primary);
}

.hex-grades-entry-head-icon .hex-icon {
	width: 20px;
	height: 20px;
}

.hex-grades-entry-head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.hex-grades-entry-head-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-grades-entry-head-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

.hex-grades-entry-head-dot {
	color: var(--hex-border-strong);
}

.hex-grades-entry-count {
	flex-shrink: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hex-primary);
	background: var(--hex-primary-soft);
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.hex-grades-entry-toolbar {
	margin-bottom: 18px;
}

.hex-grades-entry-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.hex-grades-entry-select-wrap .hex-icon {
	position: absolute;
	right: 12px;
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
	pointer-events: none;
}

.hex-grades-entry-select-wrap select {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 36px 8px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 999px;
	background: var(--hex-bg-page);
	color: var(--hex-text-primary);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hex-grades-entry-select-wrap select:hover {
	background: var(--hex-bg-soft);
}

.hex-grades-entry-select-wrap select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
}

/* --- سلول دانش‌آموز با آواتار --- */

.hex-grade-student-cell {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.hex-grade-student-avatar.hex-avatar,
.hex-grade-student-avatar.hex-avatar-initial {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px var(--hex-bg-card), 0 0 0 3px var(--hex-border-light);
}

.hex-grade-student-name {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
}

/* --- ردیف‌های جدول «ثبت نمرات ترم»: کمی فاصله‌ی عمودی بیشتر و هایلایت
   ملایم هنگام hover تا هر ردیف بیشتر شبیه یک کارت مجزا حس شود --- */

.hex-school-grades-entry .hex-school-grades-table th,
.hex-school-grades-entry .hex-school-grades-table td,
.hex-school-grades-lessons-entry .hex-school-grades-table th,
.hex-school-grades-lessons-entry .hex-school-grades-table td {
	padding: 13px 12px;
	border-bottom: 0;
}

.hex-school-grades-entry .hex-school-grades-table tbody tr,
.hex-school-grades-lessons-entry .hex-school-grades-table tbody tr {
	transition: background-color 0.15s ease;
	background: transparent;
}

.hex-school-grades-entry .hex-school-grades-table tbody tr:hover,
.hex-school-grades-lessons-entry .hex-school-grades-table tbody tr:hover {
	background: transparent;
}

.hex-student-avatar-link,
.hex-student-avatar-link * {
	text-decoration: none !important;
}

.hex-student-avatar-link {
	display: inline-flex;
	line-height: 0;
	cursor: pointer;
	transition: opacity .15s ease, box-shadow .15s ease;
	border-radius: 50%;
}

.hex-student-avatar-link:hover,
.hex-student-avatar-link:focus-visible {
	opacity: .85;
	box-shadow: 0 0 0 2px var(--hex-primary-light);
}

.hex-grade-score-input {
	width: 88px;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1.5px solid var(--hex-border-strong);
	border-radius: 12px;
	background: var(--hex-bg-card);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
	font-size: 14.5px;
	font-weight: 700;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--hex-text-heading);
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.hex-grade-score-input:hover {
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-page);
}

.hex-grade-score-input:focus {
	outline: none;
	background: var(--hex-bg-card);
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 4px rgba( 26, 188, 156, 0.16 ), inset 0 1px 2px rgba(15, 23, 42, 0.05);
	transform: translateY(-1px);
}

[data-hex-theme="dark"] .hex-grade-score-input {
	color: var(--hex-text-primary);
}

.hex-grade-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.15 );
}

.hex-grade-badge.hex-grade-A {
	background: linear-gradient( 135deg, var(--hex-color-success-light), var(--hex-color-success) );
}

.hex-grade-badge.hex-grade-B {
	background: linear-gradient( 135deg, var(--hex-primary-light), var(--hex-primary) );
}

.hex-grade-badge.hex-grade-C {
	background: linear-gradient( 135deg, var(--hex-color-warning-light), var(--hex-color-warning) );
}

.hex-grade-badge.hex-grade-D {
	background: linear-gradient( 135deg, #fb923c, #f97316 );
}

.hex-grade-badge.hex-grade-F {
	background: linear-gradient( 135deg, var(--hex-color-error-light), var(--hex-color-error) );
}

.hex-grade-badge.hex-grade-none {
	background: var(--hex-text-muted);
	box-shadow: none;
}

.hex-school-report-card {
	background: var(--hex-bg-card);
}

.hex-report-card-header h3 {
	color: var(--hex-primary);
	margin: 0 0 10px;
}

.hex-report-card-table th,
.hex-report-card-table td {
	text-align: center;
}

.hex-report-card-table td:first-child,
.hex-report-card-table th:first-child {
	text-align: right;
}

.hex-report-card-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 18px;
}

.hex-report-card-summary-item {
	flex: 1 1 200px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 6px;
	padding: 12px 16px;
	text-align: center;
}

.hex-report-card-summary-label {
	display: block;
	font-size: 12px;
	color: var(--hex-text-secondary);
	margin-bottom: 6px;
}

.hex-report-card-summary-value {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--hex-primary);
}

/* ===================== کارنامه تحصیلی - نسخه حرفه‌ای (بازطراحی) ===================== */

.hex-report-card-v2 {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	padding: 22px 26px 26px;
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}

/* منوهای کشویی انتخاب کلاس/دانش‌آموز، داخل باکس سفید کارنامه و بالای دکمه پرینت */
.hex-report-card-v2 .hex-report-card-selectors {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--hex-border);
}

/* --- دکمه‌ی «پرینت کارنامه» (بازطراحی مدرن) --- */

.hex-report-card-print-toolbar {
	justify-content: flex-end;
}

.hex-report-card-print-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hex-primary-light) 0%, var(--hex-primary) 100%);
	color: var(--hex-text-on-primary);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	box-shadow: 0 4px 12px rgba(22, 160, 133, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-report-card-print-btn .hex-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.hex-report-card-print-btn:hover {
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-dark) 100%);
	box-shadow: 0 6px 16px rgba(22, 160, 133, 0.36);
	transform: translateY(-1px);
	color: var(--hex-text-on-primary);
}

.hex-report-card-print-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(22, 160, 133, 0.3);
}

.hex-report-card-print-btn:focus-visible {
	outline: 2px solid var(--hex-primary);
	outline-offset: 2px;
}

/* --- سربرگ رسمی مدرسه (لوگو، نام، آدرس، سال تحصیلی) --- */

.hex-report-card-letterhead {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--hex-primary);
}

.hex-report-card-logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 8px;
	flex: 0 0 auto;
}

.hex-report-card-letterhead-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.hex-report-card-school-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-report-card-school-address {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-report-card-academic-year {
	flex: 0 0 auto;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
	border: 1px solid var(--hex-primary-light);
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* --- عنوان و تاریخ صدور --- */

.hex-report-card-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.hex-report-card-title h3 {
	margin: 0;
	color: var(--hex-primary);
	font-size: 19px;
	position: relative;
	padding-inline-start: 12px;
}

.hex-report-card-title h3::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 3px;
	bottom: 3px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--hex-primary), var(--hex-primary-light));
}

.hex-report-card-print-date {
	font-size: 12px;
	color: var(--hex-text-muted);
}

/* --- کارت مشخصات دانش‌آموز (عکس + جدول اطلاعات) --- */

.hex-report-card-profile {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

.hex-report-card-avatar {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
}

.hex-report-card-avatar-img.hex-avatar,
.hex-report-card-avatar-img.hex-avatar-initial {
	display: block;
	width: 76px !important;
	height: 76px !important;
	max-width: 76px;
	max-height: 76px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	flex-shrink: 0;
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 2px var(--hex-primary);
	border-radius: 50%;
	box-sizing: border-box;
}

.hex-report-card-profile-table {
	flex: 1 1 auto;
	min-width: 0;
}

.hex-report-card-profile-table th {
	color: var(--hex-text-secondary);
	font-weight: 500;
	white-space: nowrap;
}

.hex-report-card-profile-table td {
	font-weight: 600;
	color: var(--hex-text-primary);
}

/* --- جدول ریز نمرات: رنگ ملایم هر ردیف بر اساس معادل نمره + ستون روند ---
   نکته: چون این جدول حالا از الگوی «جدول کلاس‌ها» (.hex-classes-table-wrap)
   استفاده می‌کند و آن الگو مستقیماً روی <td> پس‌زمینه‌ی سفید/زبرا/هاور
   تنظیم می‌کند، این قوانین باید مستقیماً روی <td> (نه <tr>) و با تخصیص
   بالاتر نوشته شوند تا رنگ معادل نمره پنهان نشود. */
.hex-classes-table-wrap .hex-report-card-table tbody tr.hex-report-card-row-a td {
	background: rgba(22, 163, 74, 0.07);
}

.hex-classes-table-wrap .hex-report-card-table tbody tr.hex-report-card-row-b td {
	background: rgba(26, 188, 156, 0.07);
}

.hex-classes-table-wrap .hex-report-card-table tbody tr.hex-report-card-row-c td {
	background: rgba(245, 158, 11, 0.08);
}

.hex-classes-table-wrap .hex-report-card-table tbody tr.hex-report-card-row-d td,
.hex-classes-table-wrap .hex-report-card-table tbody tr.hex-report-card-row-f td {
	background: rgba(220, 38, 38, 0.07);
}

.hex-report-card-subject-name {
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-report-card-bar {
	display: inline-block;
	width: 100%;
	max-width: 90px;
	height: 8px;
	border-radius: 6px;
	background: var(--hex-border);
	overflow: hidden;
	vertical-align: middle;
}

.hex-report-card-bar-fill {
	display: block;
	height: 100%;
	border-radius: 6px;
	transition: width 0.3s ease;
}

.hex-grade-fill-a {
	background: var(--hex-color-success);
}

.hex-grade-fill-b {
	background: var(--hex-primary-light);
}

.hex-grade-fill-c {
	background: var(--hex-color-warning);
}

.hex-grade-fill-d {
	background: #f97316;
}

.hex-grade-fill-f {
	background: var(--hex-color-error);
}

.hex-grade-fill-none {
	background: var(--hex-text-muted);
}

/* --- باکس‌های خلاصه: معدل کلی (حلقه‌ای)، رتبه، وضعیت حضور --- */

.hex-report-card-summary-item {
	position: relative;
	overflow: hidden;
}

.hex-report-card-summary-item::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--hex-primary);
	opacity: 0.6;
}

.hex-report-card-summary-ring {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.hex-report-card-ring {
	--hex-ring-percent: 0;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: conic-gradient(var(--hex-primary) calc(var(--hex-ring-percent) * 1%), var(--hex-border) 0);
	position: relative;
}

.hex-report-card-ring::after {
	content: '';
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: var(--hex-bg-card);
}

.hex-report-card-ring.hex-grade-ring-a {
	background-image: conic-gradient(var(--hex-color-success) calc(var(--hex-ring-percent) * 1%), var(--hex-border) 0);
}

.hex-report-card-ring.hex-grade-ring-b {
	background-image: conic-gradient(var(--hex-primary-light) calc(var(--hex-ring-percent) * 1%), var(--hex-border) 0);
}

.hex-report-card-ring.hex-grade-ring-c {
	background-image: conic-gradient(var(--hex-color-warning) calc(var(--hex-ring-percent) * 1%), var(--hex-border) 0);
}

.hex-report-card-ring.hex-grade-ring-d,
.hex-report-card-ring.hex-grade-ring-f {
	background-image: conic-gradient(var(--hex-color-error) calc(var(--hex-ring-percent) * 1%), var(--hex-border) 0);
}

.hex-report-card-ring-value {
	position: relative;
	z-index: 1;
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-report-card-rank-num {
	font-size: 22px;
	color: var(--hex-primary);
}

.hex-report-card-rank-sep {
	font-size: 12px;
	color: var(--hex-text-muted);
	margin: 0 4px;
	font-weight: 400;
}

.hex-report-card-medal {
	font-size: 16px;
}

.hex-report-card-attendance-hint {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--hex-text-muted);
	font-weight: 400;
}

/* --- ردیف امضا (فقط در چاپ نمایش داده می‌شود) --- */

.hex-school-print-only {
	display: none;
}

.hex-report-card-signatures {
	margin-top: 30px;
	gap: 16px;
}

.hex-report-card-signature-box {
	flex: 1 1 0;
	text-align: center;
	padding-top: 34px;
	border-top: 1px dashed var(--hex-text-muted);
	font-size: 12px;
	color: var(--hex-text-secondary);
}

@media (max-width: 640px) {
	.hex-report-card-profile {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.hex-report-card-avatar {
		align-self: center;
	}

	.hex-report-card-letterhead {
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
	}

	.hex-report-card-letterhead-text {
		align-items: center;
	}
}

/* ===================== ثبت نمرات درسی ===================== */

.hex-grades-entry-date-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
}

.hex-grades-entry-date-wrap .hex-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-lesson-search {
	position: relative;
	margin: 4px 0 14px;
	max-width: 320px;
}

.hex-lesson-search .hex-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	color: var(--hex-text-muted);
	pointer-events: none;
}

.hex-lesson-search-input {
	width: 100%;
	padding: 9px 40px 9px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 999px;
	background: var(--hex-bg-page);
	font-size: 13px;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-lesson-search-input:focus {
	outline: none;
	background: var(--hex-bg-card);
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba( 26, 188, 156, 0.15 );
}

.hex-lesson-score-input {
	width: 88px;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1.5px solid var(--hex-border-strong);
	border-radius: 12px;
	background: var(--hex-bg-card);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
	font-size: 14.5px;
	font-weight: 700;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--hex-text-heading);
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.hex-lesson-score-input:hover {
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-page);
}

.hex-lesson-score-input:focus {
	outline: none;
	background: var(--hex-bg-card);
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 4px rgba( 26, 188, 156, 0.16 ), inset 0 1px 2px rgba(15, 23, 42, 0.05);
	transform: translateY(-1px);
}

[data-hex-theme="dark"] .hex-lesson-search-input,
[data-hex-theme="dark"] .hex-lesson-score-input {
	color: var(--hex-text-primary);
}

.hex-lesson-clear-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	text-align: center;
	border-radius: 50%;
	color: var(--hex-color-error);
	background: var(--hex-color-error-bg);
	text-decoration: none;
	font-size: 15px;
	border: 1px solid #fecaca;
	transition: background 0.15s ease, transform 0.15s ease;
}

.hex-lesson-clear-btn:hover {
	background: var(--hex-color-error-bg);
	transform: scale(1.06);
}

/* لیست فقط-خواندنی نمرات درسی برای دانش‌آموز/والد: کارت‌های فشرده به‌جای یک
   جدول شلوغ، تا هم خواناتر باشد و هم روی موبایل به‌خوبی جمع شود. */
/* منوی کشویی انتخاب فرزند/فیلتر درس در نمرات درسی (پنل دانش‌آموز/والد):
   قبلاً استایل نداشت و ظاهر پیش‌فرض مرورگر را می‌گرفت که با پالت رنگی
   افزونه (روشن/تیره) هم‌خوانی نداشت. */
.hex-lesson-grades-view .hex-school-search-form select {
	padding: 9px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	color: var(--hex-text-primary);
	font-family: inherit;
	font-size: 14px;
	min-width: 200px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-lesson-grades-view .hex-school-search-form select:hover {
	border-color: var(--hex-primary-light);
}

.hex-lesson-grades-view .hex-school-search-form select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

[data-hex-theme="dark"] .hex-lesson-grades-view .hex-school-search-form select {
	color: #ffffff;
}

.hex-lesson-grades-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hex-lesson-grade-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 8px;
	padding: 10px 14px;
}

.hex-lesson-grade-card-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hex-lesson-grade-subject {
	font-weight: 600;
	color: var(--hex-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-lesson-grade-date {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-lesson-grade-card-score {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.hex-lesson-grade-score-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

@media (max-width: 600px) {
	.hex-lesson-grade-card {
		flex-direction: column;
		align-items: stretch;
	}

	.hex-lesson-grade-card-score {
		justify-content: space-between;
	}
}

/* کادر ورود نمره (نمرات درسی و نمرات ترم) روی موبایل: با فونت زیر 16px،
   سافاری آیفون هنگام فوکوس روی فیلد، کل صفحه را زوم می‌کند که باعث به‌هم‌ریختن
   ظاهر می‌شود؛ همچنین ارتفاع 25px برای لمس با انگشت خیلی کوچک است. این بخش
   فونت را به 16px می‌رساند (رفع زوم ناخواسته) و کادر را برای لمس راحت‌تر
   بزرگ‌تر می‌کند. */
@media (max-width: 782px) {
	.hex-lesson-score-input,
	.hex-grade-score-input {
		width: 64px;
		min-height: 40px;
		padding: 6px 8px;
		font-size: 16px;
	}
}

/* ================= تنظیمات عمومی افزونه (فاز 8) ================= */

.hex-settings-general {
	max-width: 680px;
}

/* برخلاف بقیه‌ی بخش‌های تنظیمات (که فرم کوتاهی دارند و عمداً محدود و
   خواناتر نگه داشته می‌شوند)، این بخش‌ها به‌درخواست کاربر باید مثل بقیه‌ی
   قسمت‌های سایت (لیست کلاس‌ها، دانش‌آموزان و ...) تمام عرض باشند: ثبت
   گزارش، تنظیمات عمومی/حضور و غیاب/کارنامه، عملیات سالانه، بایگانی، خروجی
   اطلاعات، بازیابی و پشتیبان، تنظیمات قالب، و تنظیمات سایت (موسس/درباره
   مدرسه/گالری تصاویر). max-width محدودکننده‌ی هرکدام (که در بالا/پایین
   همین فایل تعریف شده) اینجا به‌صورت متمرکز خنثی می‌شود.*/
.hex-settings-full-width {
	max-width: 100% !important;
}

.hex-settings-general-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	box-shadow: 0 8px 20px rgba(var(--hex-primary-rgb), 0.22);
}

.hex-settings-general-header-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.18);
	color: var(--hex-text-on-primary);
}

.hex-settings-general-header-icon .hex-icon {
	width: 22px;
	height: 22px;
}

.hex-settings-general-header-text h3 {
	margin: 0 0 3px;
	color: var(--hex-text-on-primary);
	font-size: 16px;
}

.hex-settings-general-header-text p {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 12.5px;
}

.hex-settings-general-section {
	padding: 18px 20px 4px;
	margin-bottom: 16px;
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	background: var(--hex-bg-card);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hex-settings-general-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hex-border-light);
	color: var(--hex-text-primary);
	font-size: 14px;
}

.hex-settings-general-section-title .hex-icon {
	width: 16px;
	height: 16px;
	color: var(--hex-primary);
}

/* کارت وضعیت لایسنس (نمایش تعداد روزهای باقی‌مانده) در بالای تب «تنظیمات
   عمومی» - نک. render_license_status_card در PHP. */
.hex-license-status-card {
	margin-bottom: 20px;
}

.hex-license-status-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
	color: var(--hex-text-primary);
	font-size: 13.5px;
	line-height: 1.7;
}

.hex-license-status-meta {
	margin: 0 0 16px;
	color: var(--hex-text-secondary);
	font-size: 12.5px;
}

.hex-license-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-license-status-badge--active {
	background: rgba(22, 163, 74, 0.12);
	color: #15803d;
}

.hex-license-status-badge--warning {
	background: rgba(234, 179, 8, 0.15);
	color: #a16207;
}

.hex-license-status-badge--inactive {
	background: rgba(220, 38, 38, 0.12);
	color: #b91c1c;
}

.hex-license-status-renew {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 0;
}

/* هاور صریح دکمه‌های «درخواست تمدید»، «بررسی نسخه جدید» و «بروزرسانی»:
   این سه دکمه از کلاس پایه‌ی .hex-school-btn استفاده می‌کنند و قانون هاور
   عمومی آن (.hex-school-btn:hover) فقط پس‌زمینه را تغییر می‌دهد، بدون
   تثبیت صریح رنگ متن/border؛ در برخی قالب‌های وردپرس، سلکتور element+
   pseudo-class خودِ قالب (مثلاً «button:hover» با اسکوپ محتوا) با
   specificity بالاتر می‌تواند رنگ متن را به مقداری نزدیک به پس‌زمینه
   تغییر دهد و متن روی هاور عملاً ناخوانا/نامرئی شود. برای جلوگیری از این
   تداخل - دقیقاً مشابه راه‌حلی که پیش‌تر برای .hex-school-menu-toggle
   اعمال شده - پس‌زمینه، border و رنگ متن این سه دکمه به‌صورت صریح (با
   specificity بالاتر از قانون عمومی) روی هاور ثابت نگه داشته می‌شوند. */
.hex-license-request-renewal-btn:hover,
.hex-license-check-version-btn:hover,
.hex-license-install-update-btn:hover {
	background: var(--hex-primary-soft-hover);
	border-color: var(--hex-primary-light);
	color: var(--hex-primary-dark);
}

.hex-license-install-update-btn.hex-school-btn-primary:hover {
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: var(--hex-btn-primary-text);
}

/* نسخه‌ی موبایل: هر سه دکمه‌ی «درخواست تمدید»، «بررسی نسخه جدید» و
   «بروزرسانی» تمام‌عرض می‌شوند تا در صفحه‌ی باریک راحت‌تر لمس شوند؛
   ردیف نگه‌دارنده‌ی هرکدام هم اجازه‌ی شکستن به خط بعد (برای اسپینر/پیام
   کنار دکمه) را می‌دهد. */
@media (max-width: 640px) {
	.hex-license-status-renew,
	.hex-version-update-check,
	.hex-version-update-install {
		flex-wrap: wrap;
	}

	.hex-license-request-renewal-btn,
	.hex-license-check-version-btn,
	.hex-license-install-update-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
}

/* بخش «نسخه و بروزرسانی» - نک. render_version_update_card در PHP. */
.hex-version-update-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 6px;
	color: var(--hex-text-primary);
	font-size: 13.5px;
	line-height: 1.7;
}

.hex-version-update-line:last-child {
	margin-bottom: 0;
}

.hex-version-update-line--muted {
	color: var(--hex-text-secondary);
	font-size: 12.5px;
}

.hex-license-request-renewal-message {
	font-size: 12.5px;
	color: #15803d;
}

.hex-license-request-renewal-message.is-error {
	color: #b91c1c;
}

.hex-version-update-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
}

.hex-version-update-install {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
}

.hex-license-install-update-message {
	font-size: 12.5px;
	color: #15803d;
}

.hex-license-install-update-message.is-error {
	color: #b91c1c;
}

/* نوار پیشرفتِ شبیه‌سازی‌شده‌ی دانلود/نصب بروزرسانی - نک. startInstallProgress()
   در جاوااسکریپت (داخل render_version_update_card). به‌صورت پیش‌فرض مخفی است
   و فقط پس از کلیک روی دکمه‌ی «بروزرسانی» (کلاس is-active) نمایش داده می‌شود. */
.hex-version-update-progress {
	display: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 340px;
	margin: 12px 0 0;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.hex-version-update-progress.is-active,
.hex-version-update-progress.is-done,
.hex-version-update-progress.is-error {
	display: flex;
	opacity: 1;
	transform: translateY(0);
}

.hex-version-update-progress-track {
	position: relative;
	flex: 1 1 auto;
	height: 10px;
	border-radius: 999px;
	background: var(--hex-border-strong);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.hex-version-update-progress-fill {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: var(--hex-gradient-primary);
	box-shadow: 0 0 8px 0 color-mix(in srgb, var(--hex-primary) 55%, transparent);
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
}

/* افکت راه‌راه متحرک (shimmer) روی نوار، فقط در حالت فعال - حس «در حال انجام» را
   منتقل می‌کند، مشابه نوارهای پیشرفت مدرن. */
.hex-version-update-progress.is-active .hex-version-update-progress-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.28) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.28) 50%,
		rgba(255, 255, 255, 0.28) 75%,
		transparent 75%,
		transparent
	);
	background-size: 22px 22px;
	animation: hex-version-progress-stripes 0.9s linear infinite;
}

@keyframes hex-version-progress-stripes {
	from { background-position: 0 0; }
	to   { background-position: 22px 0; }
}

.hex-version-update-progress.is-done .hex-version-update-progress-fill {
	background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
	box-shadow: 0 0 8px 0 rgba(34, 197, 94, 0.5);
}

.hex-version-update-progress.is-error .hex-version-update-progress-fill {
	background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
	box-shadow: 0 0 8px 0 rgba(239, 68, 68, 0.45);
	width: 100%;
}

.hex-version-update-progress.is-error .hex-version-update-progress-track {
	animation: hex-version-progress-shake 0.4s ease;
}

@keyframes hex-version-progress-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(3px); }
	75%      { transform: translateX(-3px); }
}

.hex-version-update-progress-percent {
	flex: 0 0 auto;
	min-width: 40px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--hex-primary) 12%, transparent);
	color: var(--hex-primary-dark);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	white-space: nowrap;
	transition: background 0.3s ease, color 0.3s ease;
}

.hex-version-update-progress.is-done .hex-version-update-progress-percent {
	background: rgba(34, 197, 94, 0.14);
	color: #15803d;
}

.hex-version-update-progress.is-error .hex-version-update-progress-percent {
	background: rgba(239, 68, 68, 0.14);
	color: #b91c1c;
}

/* --- پاپ‌آپ تمام‌صفحه‌ی «در حال بارگذاری مجدد» (پس از نصب موفق بروزرسانی، نک.
   render_version_update_card و showReloadOverlay در جاوااسکریپت) - هم‌طرح با
   لودینگ‌های تمام‌صفحه‌ی مشابه در پلاگین (.hex-login-success-overlay). --- */

.hex-license-reload-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-license-reload-overlay.is-open {
	display: flex;
}

.hex-license-reload-card {
	position: relative;
	width: 100%;
	max-width: 280px;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 30px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

.hex-license-reload-loader {
	position: relative;
	width: 48px;
	height: 48px;
}

.hex-license-reload-ring {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: var(--hex-primary-light);
	border-right-color: var(--hex-primary-light);
	animation: hex-school-spin 0.9s linear infinite;
}

.hex-license-reload-ring-2 {
	top: 12px;
	right: 12px;
	width: 25px;
	height: 25px;
	border-top-color: var(--hex-primary);
	border-left-color: var(--hex-primary);
	border-right-color: transparent;
	animation-duration: 1.3s;
	animation-direction: reverse;
}

.hex-license-reload-text {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-heading);
	line-height: 1.8;
}

/* دکمه‌های ثبت/ذخیره داخل تب‌های تنظیمات عمومی (سال تحصیلی شهریه و مشابه):
   پیش‌فرض .hex-school-btn به‌صورت inline-block است و آیکن+متن+اسپینر داخلش
   ممکن است به‌جای هم‌ردیف شدن، زیر هم بیفتند؛ اینجا صریحاً هم‌ردیف می‌شوند. */
.hex-settings-general .hex-school-form-actions .hex-school-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hex-settings-general-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 16px;

}

/* --- تب «اپلیکیشن (PWA)»: بخش «نام اپلیکیشن» + پیش‌نمایش زنده --- */

.hex-pwa-field {
	margin-bottom: 16px;
}

.hex-pwa-appname-layout {
	display: grid;
	grid-template-columns: 1fr 176px;
	gap: 20px;
	align-items: start;
}

.hex-pwa-appname-fields {
	min-width: 0;
}

.hex-pwa-appname-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 14px;
	border-radius: 16px;
	background: var(--hex-bg-page);
	border: 1px dashed var(--hex-border);
	text-align: center;
}

.hex-pwa-appname-preview-label {
	font-size: 11px;
	color: var(--hex-text-secondary);
}

.hex-pwa-appname-preview-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	color: var(--hex-text-on-primary);
	box-shadow: 0 8px 18px rgba(var(--hex-primary-rgb), 0.28);
}

.hex-pwa-appname-preview-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-pwa-appname-preview-short {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hex-text-heading);
}

@media (max-width: 640px) {
	.hex-pwa-appname-layout {
		grid-template-columns: 1fr;
	}

	.hex-pwa-appname-preview {
		flex-direction: row;
		justify-content: flex-start;
	}
}

/* --- تب «اپلیکیشن (PWA)»: بخش «رنگ‌های اپلیکیشن» به شکل کارت‌های
   swatch مدرن، به‌جای input[type=color] خام کنار یک برچسب ساده --- */

.hex-pwa-colors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.hex-pwa-color-field {
	--hex-pwa-swatch-color: #16a085;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.hex-pwa-color-field:hover {
	border-color: var(--hex-primary-light);
	box-shadow: 0 6px 16px rgba(22, 160, 133, 0.12);
}

.hex-pwa-color-swatch {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--hex-pwa-swatch-color);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
	overflow: hidden;
}

.hex-pwa-color-swatch input[type="color"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0;
}

.hex-pwa-color-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hex-pwa-color-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hex-text-heading);
}

.hex-pwa-color-hint {
	font-size: 11.5px;
	color: var(--hex-text-secondary);
}

.hex-pwa-color-code {
	margin-top: 2px;
	font-family: 'Courier New', Consolas, monospace;
	font-size: 11.5px;
	letter-spacing: 0.5px;
	color: var(--hex-primary);
	direction: ltr;
	text-align: right;
}

.hex-settings-pwa-hint {
	font-size: 13px;
	opacity: 0.75;
	margin: 0 0 12px;
}

/* --- کارت‌های انتخاب پالت رنگی (تب «تنظیمات قالب» - فاز ۳) ---
   این کارت‌ها به‌عمد از توکن‌های رنگی (فاز ۱) استفاده می‌کنند تا با فعال‌شدن
   پالت تیره، خودِ این بخش هم به‌درستی رنگ عوض کند؛ رنگ نمونه‌ی هر پالت (داخل
   دایره‌های swatch) به‌صورت inline از PHP می‌آید و ثابت می‌ماند، چون هدف
   نمایش دقیق رنگ‌های همان پالت است، نه رنگ پالت جاری. */

.hex-school-palette-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.hex-school-palette-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: var(--hex-bg-card, #ffffff);
	background-image: none;
	color: inherit;
	border: 2px solid var(--hex-border, var(--hex-border));
	border-radius: 12px;
	outline: 0;
	cursor: pointer;
	text-align: right;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* حالت‌های hover/focus/active به‌صورت صریح ثابت نگه داشته می‌شوند، وگرنه
   سلکتور پیش‌فرض مرورگر/قالب برای button:hover (که هم‌ارزی سلکتور با
   کلاس ساده دارد) می‌تواند برنده‌ی کش‌کید شود و رنگ پیش‌فرض (اغلب قرمز)
   را جایگزین کند. همین قانون برای حالت is-active هم تکرار شده تا وقتی
   کارت انتخاب‌شده هاور می‌شود هم رنگ درست پالت را نشان دهد، نه رنگ
   پیش‌فرض مرورگر. */
.hex-school-palette-card:hover,
.hex-school-palette-card:focus,
.hex-school-palette-card:focus-visible {
	background: var(--hex-bg-card, #ffffff);
	color: inherit;
	border-color: var(--hex-primary-light, var(--hex-primary-light));
	outline: 0;
	box-shadow: 0 4px 14px rgba(22, 160, 133, 0.12);
}

.hex-school-palette-card:disabled {
	opacity: 0.6;
	cursor: default;
}

.hex-school-palette-card.is-active,
.hex-school-palette-card.is-active:hover,
.hex-school-palette-card.is-active:focus,
.hex-school-palette-card.is-active:focus-visible {
	background: var(--hex-bg-card, #ffffff);
	color: inherit;
	border-color: var(--hex-primary, var(--hex-primary));
	outline: 0;
	box-shadow: 0 0 0 3px var(--hex-primary-soft, var(--hex-primary-soft));
}

.hex-school-palette-card-swatches {
	display: flex;
	gap: 6px;
}

.hex-school-palette-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.hex-school-palette-card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--hex-text-primary, var(--hex-text-primary));
}

.hex-school-palette-card-check {
	position: absolute;
	top: 12px;
	left: 12px;
	display: none;
	color: var(--hex-primary, var(--hex-primary));
}

.hex-school-palette-card-check .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-school-palette-card.is-active .hex-school-palette-card-check {
	display: block;
}

/* --- بنر مدرن «ورود به سال تحصیلی بعدی» --- */

.hex-annual-intro {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 22px;
	margin-bottom: 16px;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-bg-card) 60%, var(--hex-bg-card) 100%);
	border: 1px solid var(--hex-border);
	box-shadow: 0 6px 18px rgba(var(--hex-primary-rgb), 0.08);
}

.hex-annual-intro::before {
	content: "";
	position: absolute;
	inset-inline-end: -30px;
	inset-block-start: -30px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--hex-primary-rgb), 0.12) 0%, rgba(var(--hex-primary-rgb), 0) 70%);
	pointer-events: none;
}

.hex-annual-intro-icon {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	box-shadow: 0 6px 14px rgba(var(--hex-primary-rgb), 0.28);
	color: var(--hex-text-on-primary);
}

.hex-annual-intro-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-annual-intro-body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.hex-annual-intro-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 8px;
	color: var(--hex-text-primary);
	font-size: 15.5px;
	font-weight: 700;
}

.hex-annual-intro-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(var(--hex-primary-rgb), 0.12);
	color: var(--hex-primary-dark);
	font-size: 11px;
	font-weight: 600;
}

.hex-annual-intro-badge .hex-icon {
	width: 12px;
	height: 12px;
}

.hex-annual-intro-desc {
	margin: 0;
	color: var(--hex-text-secondary);
	font-size: 12.5px;
	line-height: 1.9;
}

@media (max-width: 480px) {
	.hex-annual-intro {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
	}
}

/* --- کارت‌های انتخاب گزینه در تب «عملیات سالانه» --- */

.hex-annual-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.hex-annual-option-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1.5px solid var(--hex-border);
	border-radius: 14px;
	background: var(--hex-bg-page);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.hex-annual-option-card:hover {
	border-color: var(--hex-border-strong);
	background: var(--hex-bg-soft);
	transform: translateY(-1px);
}

.hex-annual-option-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hex-annual-option-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--hex-border-light);
	color: var(--hex-text-secondary);
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-annual-option-icon .hex-icon {
	width: 20px;
	height: 20px;
}

.hex-annual-option-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hex-annual-option-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-annual-option-desc {
	font-size: 12px;
	line-height: 1.8;
	color: var(--hex-text-secondary);
}

.hex-annual-option-check {
	position: absolute;
	top: 10px;
	left: 10px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--hex-text-on-primary);
}

.hex-annual-option-check .hex-icon {
	width: 13px;
	height: 13px;
}

.hex-annual-option-card--archive:has(input:checked) {
	border-color: var(--hex-color-warning);
	background: var(--hex-color-warning-bg);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.hex-annual-option-card--archive:has(input:checked) .hex-annual-option-icon {
	background: linear-gradient(135deg, var(--hex-color-warning-light), var(--hex-color-warning));
	color: var(--hex-text-on-primary);
}

.hex-annual-option-card--archive:has(input:checked) .hex-annual-option-check {
	background: var(--hex-color-warning);
}

.hex-annual-option-card--danger:has(input:checked) {
	border-color: var(--hex-color-error);
	background: var(--hex-color-error-bg);
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.hex-annual-option-card--danger:has(input:checked) .hex-annual-option-icon {
	background: linear-gradient(135deg, var(--hex-color-error-light), var(--hex-color-error));
	color: var(--hex-text-on-primary);
}

.hex-annual-option-card--danger:has(input:checked) .hex-annual-option-check {
	background: var(--hex-color-error);
}

.hex-annual-option-card:has(input:checked) .hex-annual-option-check {
	display: inline-flex;
}

.hex-annual-option-card input[type="radio"]:focus-visible ~ .hex-annual-option-icon {
	outline: 2px solid var(--hex-text-muted);
	outline-offset: 2px;
}

.hex-annual-graduation-year-box {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--hex-color-warning-light);
	border-radius: 10px;
	background: var(--hex-bg-card);
}

.hex-annual-graduation-year-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hex-color-warning-text);
	white-space: nowrap;
}

.hex-annual-graduation-year-label .hex-icon {
	width: 13px;
	height: 13px;
}

.hex-annual-graduation-year-box input[type="text"] {
	flex: 1 1 120px;
	min-width: 100px;
	padding: 7px 10px;
	border: 1px solid var(--hex-border);
	border-radius: 8px;
	font-size: 13px;
	color: var(--hex-text-primary);
	background: var(--hex-bg-page);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-annual-graduation-year-box input[type="text"]:focus {
	outline: none;
	border-color: var(--hex-color-warning);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
	background: var(--hex-bg-card);
}

.hex-settings-export-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 8px 10px;
}

.hex-settings-export-grid + .hex-school-form-actions {
	margin-top: 18px;
}

.hex-school-btn-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border-radius: 999px;
	border-color: var(--hex-primary);
	background: var(--hex-gradient-primary);
	box-shadow: 0 6px 16px rgba(var(--hex-primary-rgb), 0.28);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hex-school-btn-action:hover {
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-dark));
	box-shadow: 0 8px 18px rgba(var(--hex-primary-rgb), 0.34);
}

.hex-school-btn-action:active {
	transform: translateY(1px);
	box-shadow: 0 4px 10px rgba(var(--hex-primary-rgb), 0.28);
}

#hex-school-general-settings-form .hex-school-media-field {
	margin-bottom: 8px;
}

#hex-school-general-settings-form .hex-school-media-row {
	gap: 10px;
}

#hex-school-general-settings-form .hex-school-media-select {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 10px;
	white-space: nowrap;
}

#hex-school-general-settings-form .hex-school-logo-preview {
	margin-top: 12px;
}

#hex-school-general-settings-form .hex-school-logo-preview img {
	max-height: 76px;
	max-width: 220px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	padding: 8px;
	background: var(--hex-bg-page);
}

@media (max-width: 640px) {
	.hex-settings-general-header {
		flex-direction: column;
		text-align: center;
	}
}

.hex-settings-attendance {
	max-width: 680px;
}

.hex-settings-attendance-header {
	background: linear-gradient(135deg, var(--hex-primary-dark), var(--hex-primary-light));
}

.hex-attendance-holiday-grid {
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 10px;
	margin-bottom: 8px;
}

.hex-attendance-holiday-item {
	position: relative;
	justify-content: center;
	padding: 11px 12px;
	border-radius: 10px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	color: var(--hex-text-secondary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.hex-attendance-holiday-item:hover {
	/* رنگ ثابت سبز جایگزین توکن‌های پالت شد تا آیکن/پس‌زمینه با تغییر پالت
	   (روشن/آبی/تیره) هماهنگ بماند. */
	border-color: var(--hex-primary-light);
	background: var(--hex-primary-soft-hover);
}

.hex-attendance-holiday-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.hex-attendance-holiday-check {
	/* آیکن همیشه نمایش داده می‌شود؛ رنگ آن به توکن متن ثانویه وصل شد که
	   خودش بین پالت‌های روشن (تیره) و تیره (روشن) جابه‌جا می‌شود، تا روی
	   پس‌زمینه‌ی روشنِ حالت غیرفعال و پس‌زمینه‌ی تیره‌ی نسخه‌ی دارک خوانا بماند. */
	display: inline-flex;
	align-items: center;
	color: var(--hex-text-secondary);
}

.hex-attendance-holiday-check .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-attendance-holiday-item:has(input:checked) {
	/* پس‌زمینه‌ی گرادیانی پررنگ با پس‌زمینه‌ی ملایم (soft) پالت جایگزین شد و
	   آیکن به‌جای سفید ثابت، به رنگ اصلی پالت (var(--hex-primary)) وصل شد؛
	   یعنی با تغییر پالت (سبز/آبی/تیره) آیکن هم‌رنگ همان پالت می‌شود. */
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary);
	color: var(--hex-primary-dark);
	box-shadow: 0 4px 10px rgba(var(--hex-primary-rgb), 0.15);
}

.hex-attendance-holiday-item:has(input:checked) .hex-attendance-holiday-check {
	/* رنگ آیکن در حالت فعال، هم‌رنگ تم (var(--hex-primary)) شد. */
	color: var(--hex-primary);
}

.hex-attendance-holiday-item:focus-within {
	outline: 2px solid var(--hex-primary-light);
	outline-offset: 1px;
}

#hex-school-attendance-settings-form input[type="number"] {
	max-width: 180px;
}

.hex-settings-grades {
	max-width: 680px;
}

.hex-settings-grades-header {
	background: linear-gradient(135deg, var(--hex-primary-dark), var(--hex-primary-light));
}

.hex-settings-section-hint {
	margin: -8px 0 14px;
}

.hex-settings-grid-3,
.hex-settings-grid-2 {
	margin-bottom: 4px;
}

#hex-school-grades-settings-form input[type="number"] {
	max-width: 220px;
}

.hex-settings-threshold-field label {
	position: relative;
}

.hex-settings-threshold-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.hex-settings-threshold-a .hex-settings-threshold-dot {
	background: var(--hex-color-success);
}

.hex-settings-threshold-b .hex-settings-threshold-dot {
	background: var(--hex-primary-light);
}

.hex-settings-threshold-c .hex-settings-threshold-dot {
	background: var(--hex-color-warning);
}

.hex-settings-threshold-d .hex-settings-threshold-dot {
	background: var(--hex-color-error);
}

.hex-settings-threshold-a input[type="number"]:focus {
	border-color: var(--hex-color-success);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.hex-settings-threshold-c input[type="number"]:focus {
	border-color: var(--hex-color-warning);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.hex-settings-threshold-d input[type="number"]:focus {
	border-color: var(--hex-color-error);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.hex-settings-founder {
	max-width: 680px;
}

.hex-settings-founder-header {
	/* رنگ فیروزه‌ای ثابت (#0e7490) جایگزین توکن پالت شد تا هدر مثل سایر
	   هدرهای تنظیمات، کاملاً پالت‌محور باشد. */
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
}

.hex-settings-about {
	max-width: 680px;
}

.hex-settings-about-header {
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
}

.hex-settings-about-field textarea {
	min-height: 220px;
}

.hex-settings-gallery {
	max-width: 760px;
}

.hex-settings-gallery-header {
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
}

.hex-settings-gallery-rows {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

fieldset.hex-gallery-item-card {
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	padding: 14px 16px 16px;
	margin-bottom: 0;
	background: var(--hex-bg-card);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

fieldset.hex-gallery-item-card:hover {
	border-color: var(--hex-primary-light);
	box-shadow: 0 4px 12px rgba(26, 188, 156, 0.12);
}

fieldset.hex-gallery-item-card legend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--hex-border-light);
}

.hex-gallery-item-legend-text {
	color: var(--hex-primary-dark);
	font-weight: 700;
	font-size: 13px;
}

fieldset.hex-gallery-item-card legend .hex-school-remove-row {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 0;
	color: var(--hex-btn-danger-bg-hover);
	font-weight: 600;
	font-size: 12px;
	text-decoration: none;
}

fieldset.hex-gallery-item-card legend .hex-school-remove-row:hover {
	color: var(--hex-color-error-text);
}

.hex-gallery-item-card .hex-school-remove-row .hex-icon {
	width: 13px;
	height: 13px;
}

.hex-gallery-item-card .hex-school-media-field {
	margin-bottom: 10px;
}

.hex-gallery-item-card .hex-school-logo-preview img {
	width: 100%;
	max-width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 10px;
}

.hex-settings-gallery-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hex-settings-gallery-add-btn .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-settings-profile-section {
	padding-top: 20px;
}

.hex-settings-profile-layout {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	margin-bottom: 4px;
}

.hex-settings-profile-photo {
	flex: 0 0 auto;
	width: 150px;
}

.hex-settings-profile-photo .hex-school-media-field {
	margin-bottom: 0;
}

.hex-settings-profile-photo .hex-school-media-row {
	flex-direction: column;
	align-items: stretch;
}

.hex-settings-profile-photo .hex-school-media-select {
	justify-content: center;
	margin-top: 6px;
}

.hex-settings-profile-photo .hex-school-logo-preview {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.hex-settings-profile-photo .hex-school-logo-preview img {
	width: 96px;
	height: 96px;
	max-height: none;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	padding: 3px;
	/* رنگ سبز ثابت (#99e6d1) جایگزین توکن پالت شد تا با تغییر پالت هماهنگ بماند. */
	border: 2px solid var(--hex-primary-light);
}

.hex-settings-profile-fields {
	flex: 1;
	min-width: 0;
}

@media (max-width: 560px) {
	.hex-settings-profile-layout {
		flex-direction: column;
		align-items: stretch;
	}

	.hex-settings-profile-photo {
		width: 100%;
	}
}

.hex-school-settings h4 {
	color: var(--hex-primary);
	margin-bottom: 4px;
}

.hex-school-field-hint {
	display: block;
	color: var(--hex-text-secondary);
	font-size: 12px;
	margin-top: 4px;
}

.hex-school-settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 4px 16px;
}

.hex-settings-grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.hex-settings-grid-2 {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hex-school-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
	margin-bottom: 16px;
}

.hex-school-checkbox-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 12px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	font-weight: 500;
	color: var(--hex-btn-secondary-text);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-school-checkbox-item:hover {
	border-color: var(--hex-primary-light);
	background: var(--hex-primary-soft-hover);
}

.hex-school-checkbox-item:has(input:checked) {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary);
	box-shadow: 0 2px 8px rgba(var(--hex-primary-rgb), 0.12);
	color: var(--hex-text-primary);
}

.hex-school-checkbox-item input[type="checkbox"] {
	flex: none;
	appearance: none;
	-webkit-appearance: none;
	width: 19px;
	height: 19px;
	margin: 0;
	border-radius: 6px;
	border: 2px solid var(--hex-border-strong);
	background: var(--hex-bg-card);
	position: relative;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.hex-school-checkbox-item input[type="checkbox"]:hover {
	border-color: var(--hex-primary);
}

.hex-school-checkbox-item input[type="checkbox"]:active {
	transform: scale(0.92);
}

.hex-school-checkbox-item input[type="checkbox"]:checked {
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
	border-color: var(--hex-primary);
}

.hex-school-checkbox-item input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 5px;
	height: 9px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.hex-school-checkbox-item input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.22);
}

/* ---------- انتخاب معلمان (معرفی کادر) ---------- */
.hex-staff-select-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.hex-staff-select-item {
	align-items: center;
}

.hex-staff-select-item-avatar,
.hex-staff-select-item .hex-avatar-initial {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.hex-staff-select-item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow: hidden;
}

.hex-staff-select-item-name {
	font-size: 13.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-staff-select-item-class {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--hex-text-secondary);
}

.hex-school-checkbox-item--disabled {
	background: var(--hex-bg-soft);
	color: var(--hex-text-muted);
	cursor: not-allowed;
}

.hex-school-checkbox-item--disabled input[type="checkbox"] {
	cursor: not-allowed;
	border-color: var(--hex-border);
	background: #e9edf1;
}

.hex-school-checkbox-item--disabled input[type="checkbox"]:hover {
	border-color: var(--hex-border);
}

.hex-school-checkbox-item--disabled .hex-school-muted {
	color: var(--hex-border-strong);
}

.hex-teacher-assign-grid .hex-school-checkbox-item {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.hex-teacher-assign-grid .hex-school-checkbox-item label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
}

.hex-teacher-assign-grid .hex-subject-class-hint {
	font-size: 9px;
}

.hex-teacher-assign-select-wrap {
	max-width: 360px;
}

.hex-teacher-assign-select-wrap select {
	width: 100%;
}

[data-hex-theme="dark"] .hex-teacher-assign-select-wrap select {
	background: var(--hex-bg-card);
	color: #ffffff;
	border: 1px solid var(--hex-border-strong);
	border-radius: 8px;
	padding: 8px 12px;
}

[data-hex-theme="dark"] .hex-teacher-assign-select-wrap select option {
	color: #0f172a;
}

.hex-teacher-assign-taken-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hex-teacher-assign-taken-hint {
	font-size: 11px;
	margin-bottom: 2px;
}

.hex-teacher-assign-taken-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	color: var(--hex-text-secondary);
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 6px;
	padding: 6px 10px;
}

.hex-school-checkbox-item-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 9px;
	color: var(--hex-text-muted);
	padding-right: 22px;
}

.hex-checkbox-release-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #fef2f2;
	color: var(--hex-color-error);
	text-decoration: none;
	flex: 0 0 auto;
	transition: background 0.15s ease;
}

.hex-checkbox-release-btn .hex-icon {
	width: 11px;
	height: 11px;
}

.hex-checkbox-release-btn:hover {
	background: var(--hex-color-error-bg);
}

.hex-enroll-section-desc {
	margin-top: -6px;
	margin-bottom: 14px;
	font-size: 13px;
}

.hex-enroll-scroll-list {
	max-height: 220px;
	overflow-y: auto;
	padding: 4px;
	border: 1px solid var(--hex-border-light);
	border-radius: 6px;
}

/* ======================================================================
   صفحه‌ی «ویرایش کلاس‌ها و دروس معلم» — بازطراحی شیک‌تر (فاز جدید)
   تمام کلاس‌های زیر به‌جای override رفتار مشترک checkbox/select، فقط زیر
   ancestor اختصاصی .hex-edit-teacher-classes تعریف شده‌اند تا روی فرم مشابه
   «تخصیص کلاس و دروس» در ویزارد ثبت‌نام معلم جدید (که همان کلاس‌های پایه‌ی
   hex-teacher-assign-grid/select-wrap را به اشتراک می‌گذارد) اثری نگذارد.
   ====================================================================== */

/* هدر خلاصه‌وضعیت: آواتار معلم + نام + دو چیپ (کلاس مسئولیت/تعداد دروس) */
.hex-edit-teacher-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: -4px 0 22px;
	padding: 14px 16px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border-light);
	border-radius: 12px;
}

.hex-edit-teacher-avatar {
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px var(--hex-bg-card), 0 0 0 4px var(--hex-primary-soft);
}

.hex-edit-teacher-header-info {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.hex-edit-teacher-header-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-edit-teacher-header-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hex-edit-teacher-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
}

.hex-edit-teacher-chip .hex-icon {
	width: 13px;
	height: 13px;
}

/* هر بخش (کلاس مسئولیت / دروس تدریسی) با یک عنوان کوچک آیکن‌دار و یک خط
   کمرنگ جدا از بخش قبلی، مطابق همان الگوی بصری فرم ویرایش دانش‌آموز
   (hex-student-edit-section)؛ این‌جا فقط برای فاصله‌گذاری مناسب‌تر با فرم
   جاری، کمی تنظیم‌شده. */
.hex-edit-teacher-classes .hex-student-edit-section.hex-edit-teacher-section {
	margin-top: 24px;
}

.hex-edit-teacher-classes .hex-student-edit-section.hex-edit-teacher-section:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.hex-edit-teacher-classes .hex-student-edit-section-title {
	flex-wrap: wrap;
	row-gap: 6px;
}

/* پوسته‌ی مدرن فیلد انتخاب «کلاس مسئولیت»: آیکن داخل کپسول به‌جای select
   ساده‌ی بدون تزئین. */
.hex-edit-teacher-select-shell {
	position: relative;
	max-width: 380px;
}

.hex-edit-teacher-select-shell .hex-edit-teacher-select-icon {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	display: flex;
	color: var(--hex-primary);
	pointer-events: none;
}

.hex-edit-teacher-select-shell select {
	width: 100%;
	padding: 10px 40px 10px 14px;
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-card);
	color: var(--hex-text-primary);
	font-weight: 600;
	font-size: 13.5px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-edit-teacher-select-shell select:hover {
	border-color: var(--hex-primary-light);
}

.hex-edit-teacher-select-shell select:focus-visible {
	outline: none;
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 3px rgba(var(--hex-primary-rgb), 0.15);
}

/* بج شمارنده‌ی «X از Y درس انتخاب‌شده» کنار عنوان دروس تدریسی؛ با جاوااسکریپت
   به‌صورت زنده هنگام تیک‌زدن/برداشتن به‌روزرسانی می‌شود. */
.hex-edit-teacher-subject-counter {
	display: inline-flex;
	align-items: center;
	margin-inline-start: auto;
	padding: 3px 12px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
}

/* عنوان زیرگروه دروس بر اساس کلاس؛ یک ردیف کامل‌عرض داخل گرید که دروس هر
   کلاس را از هم جدا می‌کند و اطلاعات ساختاری (این درس مال کدام کلاس است)
   را به‌جای متن کوچک کنار هر آیتم، در قالب یک عنوان بخش نشان می‌دهد. */
.hex-edit-teacher-subject-grid {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px 10px;
}

.hex-edit-teacher-subject-group-label {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--hex-text-muted);
}

.hex-edit-teacher-subject-group-label:first-child {
	margin-top: 2px;
}

.hex-edit-teacher-subject-group-label::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--hex-border-light);
}

/* نوار پایانی دکمه‌های ذخیره/انصراف: با یک خط بالای ظریف از بقیه‌ی فرم جدا
   می‌شود تا در فرم‌های بلندتر (تعداد زیاد دروس/کلاس) به‌عنوان لنگر پایانی
   دیداری عمل کند. */
.hex-edit-teacher-actions {
	margin-top: 26px !important;
	padding-top: 18px;
	border-top: 1px solid var(--hex-border-light);
}

@media (max-width: 560px) {
	.hex-edit-teacher-header {
		flex-wrap: wrap;
	}

	.hex-edit-teacher-select-shell {
		max-width: none;
	}

	.hex-edit-teacher-subject-counter {
		margin-inline-start: 0;
	}
}

.hex-school-logo-preview {
	display: block;
	margin-top: 8px;
}

.hex-school-logo-preview img {
	max-height: 60px;
	max-width: 160px;
	border: 1px solid var(--hex-border);
	border-radius: 4px;
	padding: 4px;
	background: var(--hex-bg-card);
}

.hex-school-staff-row {
	border: 1px solid var(--hex-border);
	border-radius: 6px;
	padding: 12px 16px 4px;
	margin-bottom: 16px;
	background: var(--hex-bg-page);
}

.hex-school-staff-row legend {
	padding: 0 6px;
	color: var(--hex-primary);
	font-weight: bold;
}

.hex-school-staff-row legend .hex-school-remove-row {
	margin-right: 8px;
	color: var(--hex-btn-danger-bg-hover);
	font-weight: normal;
	font-size: 12px;
}

.hex-school-checkbox-group-wrap {
	border: none;
	padding: 0;
	margin: 0 0 18px;
}

.hex-school-checkbox-group-wrap legend {
	padding: 0;
	margin-bottom: 8px;
	font-weight: bold;
}

.hex-school-field-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
}

.hex-school-field-label .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-school-toggle-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.hex-school-toggle-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.hex-school-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 999px;
	background: var(--hex-bg-page);
	color: var(--hex-btn-secondary-text);
	font-size: 13px;
	font-weight: normal;
	cursor: pointer;
	user-select: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hex-school-toggle-btn:hover {
	border-color: var(--hex-text-muted);
}

.hex-school-toggle-input:checked + .hex-school-toggle-btn {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary);
	color: var(--hex-primary-dark);
	font-weight: bold;
}

.hex-school-toggle-input:focus-visible + .hex-school-toggle-btn {
	outline: 2px solid var(--hex-primary);
	outline-offset: 2px;
}

.hex-school-toggle-input:disabled + .hex-school-toggle-btn {
	cursor: not-allowed;
	opacity: .75;
}

.hex-school-toggle-input:checked:disabled + .hex-school-toggle-btn {
	background: var(--hex-border);
	border-color: var(--hex-text-muted);
	color: var(--hex-text-secondary);
}

/* رنگ اختصاصی هر مهارت در پاپ‌آپ «ثبت مهارت» (فقط همین گروه چک‌باکس‌ها؛
   بدون تأثیر روی سایر گروه‌های چک‌باکس مشابه در بخش‌های دیگر افزونه). */
.hex-skills-toggle-group .hex-school-toggle-input:checked:not(:disabled) + .hex-school-toggle-btn {
	background: var( --hex-skill-color, var(--hex-primary) );
	border-color: var( --hex-skill-color, var(--hex-primary) );
	color: var(--hex-text-on-primary);
}

/* بسته‌بندی هر گزینه‌ی مهارت در پاپ‌آپ «ثبت مهارت» برای امکان نمایش دکمه‌ی
   × حذف مستقیم (فقط روی مهارت‌هایی که قبلاً برای دانش‌آموز ثبت شده و
   تیک‌خورده/غیرفعال نمایش داده می‌شوند؛ کلاس is-recorded توسط جاوااسکریپت
   هنگام باز شدن پاپ‌آپ اضافه/حذف می‌شود). */
.hex-skills-toggle-item {
	position: relative;
	display: inline-flex;
}

.hex-skills-toggle-remove {
	display: none;
	position: absolute;
	top: -6px;
	inset-inline-end: -6px;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--hex-border-strong);
	border-radius: 50%;
	background: var(--hex-bg-card);
	color: var(--hex-text-secondary);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hex-skills-toggle-item.is-recorded .hex-skills-toggle-remove {
	display: inline-flex;
}

.hex-skills-toggle-remove:hover,
.hex-skills-toggle-remove:focus-visible {
	background: var(--hex-btn-danger-bg);
	border-color: var(--hex-btn-danger-bg);
	color: var(--hex-btn-danger-text);
	outline: none;
}

.hex-skills-toggle-remove.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* پنل کارتی فرم «ثبت گزارش»: عریض‌تر از فرم‌های کوتاه (کلاس/شهریه) چون چند
   بخش موضوعی (اطلاعات گزارش / جزئیات اجرا / دسته‌بندی) دارد؛ از همان
   بخش‌بندی .hex-student-edit-section و گرید .hex-student-edit-grid فرم
   ویرایش دانش‌آموز استفاده می‌کند تا ظاهر یکدست بماند. */
.hex-reports-form-panel {
	max-width: 760px;
}

.hex-reports-form-panel .hex-school-checkbox-group-wrap:last-child {
	margin-bottom: 0;
}

/* پنل کارتی فرم «ارسال اعلان جدید»: فرم کوتاهی (فقط عنوان و متن) است، پس
   دکمه‌ی ارسال به‌جای هم‌عرض با دکمه‌ی بازگشت (که این فرم اصلاً ندارد)،
   تمام‌عرض و برجسته‌تر رندر می‌شود. */
.hex-notification-form-panel {
	max-width: 560px;
}

.hex-notification-form-panel .hex-school-form-actions {
	margin-top: 22px;
}

.hex-notification-form-panel .hex-school-form-actions .hex-school-btn {
	width: 100%;
	justify-content: center;
	padding: 12px 18px;
	font-size: 14.5px;
}

/* ============= بازطراحی «شیک و حرفه‌ای» جدول «گزارش‌های ثبت‌شده» =============
   دقیقاً همان الگوی جدول کلاس‌ها (.hex-classes-table-wrap): هدر کم‌رنگ سبز،
   ردیف‌های زبرا، هاور، گوشه‌های گرد و بدون خط عمودی؛ فقط برای این جدول
   (کلاس .hex-reports-table) اسکوپ شده تا روی جدول‌های دیگر اثر نگذارد. */
.hex-reports-table-wrap {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.hex-reports-table-wrap .hex-reports-table {
	border-collapse: separate;
	border-spacing: 0;
}

.hex-reports-table-wrap .hex-reports-table th,
.hex-reports-table-wrap .hex-reports-table td {
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

.hex-reports-table-wrap .hex-reports-table thead th {
	/* به‌جای سبز ثابت، به توکن‌های پالت رنگی وصل شد تا با تغییر پالت (روشن/آبی/تیره)
	   هماهنگ بماند؛ دقیقاً هم‌الگو با هدر جدول کلاس‌ها (.hex-classes-table-wrap). */
	background: var(--hex-primary-soft-hover);
	color: var(--hex-primary-dark);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 13px 16px;
	border-bottom: 0;
	white-space: nowrap;
}

.hex-reports-table-wrap .hex-reports-table thead th:first-child {
	border-top-right-radius: 14px;
}

.hex-reports-table-wrap .hex-reports-table thead th:last-child {
	border-top-left-radius: 14px;
}

.hex-reports-table-wrap .hex-reports-table tbody td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--hex-border-light);
	background: var(--hex-bg-card);
}

.hex-reports-table-wrap .hex-reports-table tbody tr:nth-child(even) td {
	background: var(--hex-bg-page);
}

.hex-reports-table-wrap .hex-reports-table tbody tr:last-child td {
	border-bottom: 0;
}

.hex-reports-table-wrap .hex-reports-table tbody tr:hover td {
	background: var(--hex-primary-soft);
}

.hex-report-title-cell {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--hex-text-heading);
}

.hex-report-title-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #eefaf7;
	color: var(--hex-primary);
	flex: 0 0 auto;
}

.hex-report-title-icon .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-report-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-report-type-activity {
	/* فقط پس‌زمینه به پالت رنگی وصل شد (var(--hex-primary-soft))؛ فقط این بج
	   (گزارش فعالیت) تغییر کرد، بج «گزارش انجمن‌ها» بدون تغییر باقی ماند. */
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

.hex-report-type-association {
	background: #ede9fe;
	color: #6d28d9;
}

.hex-report-view-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	font-size: 13px;
	border-radius: 999px;
	background: var(--hex-primary-soft);
	border: 1px solid var(--hex-primary-light);
	color: var(--hex-primary-dark);
	font-weight: 600;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.hex-report-view-btn .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-report-view-btn:hover {
	background: #ccfbf1;
	border-color: var(--hex-primary);
	box-shadow: 0 2px 6px rgba(22, 160, 133, 0.18);
}

[data-hex-theme="dark"] .hex-reports-table-wrap .hex-report-view-btn {
	color: #4ade80;
}

[data-hex-theme="dark"] .hex-tuition-apply-year-btn {
	color: #4ade80;
}

.hex-school-media-field {
	margin-bottom: 10px;
}

.hex-school-media-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.hex-school-media-row input[type="url"] {
	flex: 1;
}

/* نوار «اندازه تصویر» (نک. render_settings_site_about_tab در PHP): یک
   input[type=range] ساده که مقدار زنده‌ی آن در یک <output> کنارش نمایش
   داده می‌شود (نک. رویداد input در frontend.js). */
.hex-school-range-field {
	margin-bottom: 10px;
}

.hex-school-range-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hex-school-range-input {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	border-radius: 999px;
	background: var(--hex-border);
	outline: none;
}

.hex-school-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hex-primary);
	border: 3px solid var(--hex-bg-card);
	box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.4);
	cursor: pointer;
}

.hex-school-range-input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hex-primary);
	border: 3px solid var(--hex-bg-card);
	box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.4);
	cursor: pointer;
}

.hex-school-range-output {
	min-width: 46px;
	text-align: center;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-primary);
	background: var(--hex-primary-soft);
	border-radius: 999px;
	padding: 4px 10px;
}

.hex-school-repeater-rows {
	margin-bottom: 8px;
}

.hex-school-add-row {
	/* پس‌زمینه و حاشیه‌ی خط‌چین ثابت (رنگ‌های آبی/سبز هاردکد) جایگزین توکن‌های
	   پالت شدند تا با تغییر پالت (روشن/آبی/تیره) هماهنگ بمانند. */
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
	border: 1px dashed var(--hex-primary-light);
}

.hex-school-repeater-template {
	display: none;
}

/* ===================== CSS مخصوص چاپ کارنامه ===================== */

@media print {
	body * {
		visibility: hidden;
	}

	.hex-school-report-card,
	.hex-school-report-card * {
		visibility: visible;
	}

	.hex-school-report-card {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		border: none;
		box-shadow: none;
	}

	.hex-exam-schedule-print-area,
	.hex-exam-schedule-print-area * {
		visibility: visible;
	}

	.hex-exam-schedule-print-area {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		border: none;
		box-shadow: none;
	}

	.hex-school-no-print,
	.hex-school-nav,
	.hex-school-subtabs {
		display: none !important;
	}

	/* پنل ثابت (فاز 18) با ارتفاع 100vh و overflow:hidden برای اسکرول مستقل
	   نوشته شده، ولی این محدودیت نباید محتوای چاپ‌شونده (کارنامه، برنامه
	   امتحانی و ...) را در صفحه‌ی کاغذی ببرد؛ در چاپ کاملاً غیرفعال می‌شود. */
	.hex-school-frontend-panel,
	.hex-school-layout,
	.hex-school-view {
		height: auto !important;
		overflow: visible !important;
	}

	.hex-report-card-table,
	.hex-exam-schedule-table {
		page-break-inside: avoid;
	}

	/* در چاپ کارنامه، رنگ‌ها (نشان‌های نمره، حلقه‌ی معدل، رنگ ردیف‌ها) باید
	   دقیقاً همان چیزی باشد که روی صفحه دیده می‌شود، وگرنه بعضی مرورگرها
	   به‌صورت پیش‌فرض پس‌زمینه‌ها و گرادیان‌ها را در چاپ حذف می‌کنند. */
	.hex-report-card-v2,
	.hex-report-card-v2 * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		color-adjust: exact;
	}

	.hex-report-card-v2 {
		border: none;
		box-shadow: none;
		padding: 0;
	}

	/* ردیف امضا (معلم/مدیر/مهر مدرسه) فقط باید در نسخه‌ی چاپی کارنامه دیده
	   شود، نه در نمایش عادی داخل مرورگر. */
	.hex-school-print-only {
		display: flex !important;
	}
}

/* ===================== برنامه امتحانی (فاز 14 + بازطراحی) ===================== */

.hex-exam-schedule-print-header {
	margin-bottom: 12px;
}

/* --- نوار معرفی (Hero): نام کلاس، نزدیک‌ترین امتحان و آمار سریع --- */

.hex-exam-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient( 135deg, var(--hex-primary-dark) 0%, var(--hex-primary) 55%, var(--hex-primary-light) 100% );
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 18px;
	color: var(--hex-text-on-primary);
	box-shadow: 0 6px 16px rgba( var(--hex-primary-rgb), 0.22 );
}

.hex-exam-hero-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.16 );
	display: flex;
	align-items: center;
	justify-content: center;
}

.hex-exam-hero-icon .hex-icon {
	width: 24px;
	height: 24px;
}

.hex-exam-hero-main {
	flex: 1 1 auto;
	min-width: 0;
}

.hex-exam-hero-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
}

.hex-exam-hero-next {
	margin: 0;
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.9 );
}

.hex-exam-hero-next.hex-exam-hero-done {
	color: rgba( 255, 255, 255, 0.75 );
}

.hex-exam-hero-stats {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
}

.hex-exam-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.14 );
	border-radius: 10px;
	padding: 8px 16px;
	min-width: 74px;
}

.hex-exam-stat-num {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
}

.hex-exam-stat-label {
	font-size: 11px;
	color: rgba( 255, 255, 255, 0.85 );
	margin-top: 2px;
	white-space: nowrap;
}

/* --- نوار ابزار (انتخاب کلاس، افزودن، پرینت، دانلود) --- */

.hex-exam-toolbar {
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.hex-exam-toolbar-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

/* دکمه‌های نوار ابزار (افزودن/پرینت/دانلود) به شکل قرص با گرادیان، بدون
   خط زیرِ متن در هیچ حالتی (برخی قالب‌های وردپرس به لینک‌ها خط زیر پیش‌فرض
   می‌دهند که با !important خنثی می‌شود). */
.hex-school-exam-schedule .hex-school-btn,
.hex-school-exam-schedule .hex-school-btn:link,
.hex-school-exam-schedule .hex-school-btn:visited,
.hex-school-exam-schedule .hex-school-btn:hover,
.hex-school-exam-schedule .hex-school-btn:focus,
.hex-school-exam-schedule .hex-school-btn:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hex-school-exam-schedule .hex-school-btn:hover {
	transform: translateY( -1px );
}

.hex-school-exam-schedule .hex-school-btn-primary {
	background: linear-gradient( 135deg, var(--hex-primary-light), var(--hex-primary) );
	border-color: var(--hex-primary);
	color: var(--hex-text-on-primary);
	box-shadow: 0 4px 10px rgba( var(--hex-primary-rgb), 0.25 );
}

.hex-school-exam-schedule .hex-school-btn-primary:hover {
	background: linear-gradient( 135deg, var(--hex-primary), var(--hex-primary-dark) );
	border-color: var(--hex-primary-dark);
	box-shadow: 0 6px 14px rgba( var(--hex-primary-rgb), 0.32 );
}

.hex-exam-toolbar .hex-icon {
	width: 15px;
	height: 15px;
}

/* --- منوی کشویی انتخاب کلاس (زیباتر، هم‌راستا با سایر بخش‌های افزونه) --- */

.hex-exam-class-switcher .hex-school-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hex-exam-class-switcher label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
	white-space: nowrap;
}

.hex-exam-class-switcher label .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-exam-class-switcher select {
	padding: 9px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	font-family: inherit;
	font-size: 14px;
	min-width: 200px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-exam-class-switcher select:hover {
	border-color: var(--hex-primary-light);
}

.hex-exam-class-switcher select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba( 26, 188, 156, 0.15 );
}

/* پالت تیره — برنامه امتحانی: متن و آیکنِ منوی کشویی انتخاب کلاس سفید شود،
   و برچسب وضعیتِ «N روز مانده» (upcoming) که رنگ متنش با پس‌زمینه‌ی تیره‌اش
   کنتراست کافی نداشت و ناخوانا بود، خواناتر شود. */
[data-hex-theme="dark"] .hex-exam-class-switcher label,
[data-hex-theme="dark"] .hex-exam-class-switcher label .hex-icon,
[data-hex-theme="dark"] .hex-exam-class-switcher select {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-exam-status-badge.hex-exam-status-upcoming {
	color: var(--hex-primary-light);
}

/* --- چک‌باکس چندانتخابی «انتخاب کلاس» بخش آزمون جامع --- */

.hex-combined-exam-class-checkboxes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.hex-combined-exam-class-checkboxes legend {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	padding: 0;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
	white-space: nowrap;
	width: 100%;
}

.hex-combined-exam-class-checkboxes legend .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-combined-exam-class-checkbox-item {
	padding: 7px 12px;
	font-size: 13px;
}

.hex-combined-exam-class-checkbox-item input[type="checkbox"] {
	width: 17px;
	height: 17px;
}

@media ( max-width: 782px ) {
	.hex-combined-exam-class-checkboxes {
		width: 100%;
	}

	.hex-combined-exam-class-checkbox-item {
		flex: 1 1 calc( 50% - 8px );
		justify-content: center;
	}
}

/* --- برچسب وضعیت هر ردیف (امروز / N روز مانده / برگزار شده) --- */

.hex-exam-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-exam-status-badge.hex-exam-status-today {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
}

.hex-exam-status-badge.hex-exam-status-soon {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-exam-status-badge.hex-exam-status-upcoming {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

.hex-exam-status-badge.hex-exam-status-past {
	background: var(--hex-bg-soft);
	color: var(--hex-text-muted);
}

/* --- سلول درس با آیکن کتاب --- */

.hex-exam-subject-cell {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--hex-text-primary);
}

.hex-exam-subject-cell .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
	flex: 0 0 auto;
}

/* --- ردیف‌های جدول: نزدیک‌ترین امتحان برجسته می‌شود، امتحانات گذشته کم‌رنگ --- */

.hex-classes-table-wrap .hex-exam-schedule-table tbody tr.hex-exam-row-next td {
	background: var(--hex-primary-soft);
	box-shadow: inset 3px 0 0 var(--hex-primary-light);
}

.hex-exam-row-past,
.hex-exam-status-past {
	color: var(--hex-text-muted);
}

.hex-classes-table-wrap .hex-exam-schedule-table tbody tr.hex-exam-row-past td {
	background: var(--hex-bg-page);
}

.hex-exam-row-past .hex-exam-subject-cell,
.hex-exam-row-past .hex-exam-subject-cell .hex-icon {
	color: var(--hex-text-muted);
}

/* --- دکمه‌های آیکنیِ عملیات (ویرایش/حذف) --- */

.hex-exam-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.hex-exam-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid var(--hex-border);
	background: var(--hex-bg-page);
	color: var(--hex-primary);
	text-decoration: none;
}

.hex-exam-icon-btn:hover {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-exam-icon-btn .hex-icon {
	width: 15px;
	height: 15px;
}

.hex-exam-icon-btn-danger {
	color: var(--hex-color-error);
}

.hex-exam-icon-btn-danger:hover {
	background: var(--hex-color-error-bg);
	border-color: var(--hex-color-error);
}

/* --- فرم افزودن/ویرایش امتحان: کارت با شبکه‌ی دو ستونه --- */

.hex-exam-form-card {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 2px 10px rgba( 15, 23, 42, 0.05 );
	max-width: 720px;
}

.hex-exam-form-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hex-border);
	font-size: 16px;
	color: var(--hex-text-primary);
}

.hex-exam-form-title .hex-icon {
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-exam-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 20px;
}

.hex-exam-field {
	margin: 0 0 14px;
}

.hex-exam-field-full {
	grid-column: 1 / -1;
}

.hex-exam-field label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hex-btn-secondary-text);
}

.hex-exam-field label .hex-icon {
	width: 14px;
	height: 14px;
	color: var(--hex-primary);
	flex: 0 0 auto;
}

.hex-exam-field select,
.hex-exam-field input[type="text"],
.hex-exam-field input[type="time"],
.hex-exam-field input[type="number"],
.hex-exam-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 6px;
	font-family: inherit;
}

.hex-exam-field select:focus,
.hex-exam-field input:focus,
.hex-exam-field textarea:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba( 26, 188, 156, 0.15 );
}

.hex-exam-field textarea {
	resize: vertical;
}

/* پالت تیره — فرم افزودن/ویرایش برنامه امتحانی: همه‌ی فیلدها (انتخاب درس،
   تاریخ جلالی، ساعت، مکان، توضیحات) پس‌زمینه و متنشان تیره/سفید شود، به
   همان الگوی سایر فرم‌های پلاگین (مثل فرم ویرایش دانش‌آموز). */
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field select,
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field input[type="text"],
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field input[type="time"],
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field textarea {
	background: var(--hex-bg-page);
	border-color: var(--hex-border-strong);
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field select option {
	color: #0f172a;
}

[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-jalali-date .hex-jalali-year,
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-jalali-date .hex-jalali-day,
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-jalali-date .hex-jalali-month {
	background: var(--hex-bg-page);
	border-color: var(--hex-border-strong);
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-jalali-date .hex-jalali-month {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 6px center;
}

[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-jalali-date .hex-jalali-month option {
	color: #0f172a;
}

[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field input::placeholder,
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-exam-field textarea::placeholder,
[data-hex-theme="dark"] #hex-school-exam-schedule-form .hex-jalali-date input::placeholder {
	color: var(--hex-text-muted);
}

.hex-exam-form-actions {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--hex-border);
}

@media ( max-width: 640px ) {

	.hex-exam-hero {
		flex-wrap: wrap;
	}

	.hex-exam-hero-stats {
		width: 100%;
		justify-content: flex-start;
	}

	.hex-exam-form-grid {
		grid-template-columns: 1fr;
	}
}

/* جدول برنامه امتحانی مثل جدول کلاس‌ها فقط با اسکرول افقی محدود به خودش
   (باکس .hex-school-table-scroll.hex-classes-table-wrap) نمایش داده می‌شود؛
   نیازی به تبدیل کارتی جداگانه در موبایل نیست. */

/* ===================== شهریه و اقساط (فاز 9 + بازطراحی فاز 16 - داشبورد آماری) ===================== */

.hex-tuition-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hex-text-on-primary);
	white-space: nowrap;
}

.hex-tuition-badge.hex-tuition-pending {
	background: var(--hex-color-error);
}

.hex-tuition-badge.hex-tuition-settled {
	background: var(--hex-color-success);
}

.hex-tuition-installments-table td {
	vertical-align: middle;
}

.hex-tuition-seq-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 12.5px;
	font-weight: 700;
	font-family: monospace, monospace;
}

.hex-tuition-amount-input {
	width: 110px;
	padding: 4px 8px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 4px;
	background: var(--hex-bg-page);
	color: var(--hex-text-primary);
	font-size: 13px;
	font-family: inherit;
	text-align: center;
}

.hex-tuition-date-input {
	padding: 4px 6px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 4px;
	background: var(--hex-bg-page);
	color: var(--hex-text-primary);
	font-size: 13px;
	font-family: inherit;
}

.hex-tuition-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.hex-tuition-toggle-btn,
.hex-tuition-toggle-btn:hover,
.hex-tuition-toggle-btn:focus,
.hex-tuition-toggle-btn:visited {
	text-decoration: none !important;
}

.hex-tuition-toggle-btn .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-tuition-toggle-btn:hover {
	transform: translateY( -1px );
}

.hex-tuition-toggle-btn--pay {
	background: #dcfce7;
	color: #166534;
}

.hex-tuition-toggle-btn--pay:hover {
	background: #bbf7d0;
}

.hex-tuition-toggle-btn--unpay {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error-text);
}

.hex-tuition-toggle-btn--unpay:hover {
	background: #fecaca;
}

.hex-tuition-installments-title {
	margin-top: 0;
}

.hex-tuition-payment-history-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 0;
}

.hex-tuition-payment-history-title .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-primary);
}

/* --- کادر بالای صفحه «موارد انضباطی» (هم‌راستا با کادر برنامه درسی هفتگی) --- */

.hex-discipline-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding: 22px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	box-shadow: 0 10px 24px -8px rgba(var(--hex-primary-rgb), 0.45);
	color: var(--hex-text-on-primary);
}

.hex-discipline-hero-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
}

.hex-discipline-hero-icon .hex-icon {
	width: 26px;
	height: 26px;
	color: var(--hex-text-on-primary);
}

.hex-discipline-hero-text h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
}

.hex-discipline-hero-text p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
	.hex-discipline-hero {
		flex-direction: column;
		text-align: center;
	}
}

/* --- کادر بالای صفحه «مهارت‌ها» (هم‌راستا با کادر موارد انضباطی) --- */

.hex-skills-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding: 22px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	box-shadow: 0 10px 24px -8px rgba(var(--hex-primary-rgb), 0.45);
	color: var(--hex-text-on-primary);
}

.hex-skills-hero-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
}

.hex-skills-hero-icon .hex-icon {
	width: 26px;
	height: 26px;
	color: var(--hex-text-on-primary);
}

.hex-skills-hero-text h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
}

.hex-skills-hero-text p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
	.hex-skills-hero {
		flex-direction: column;
		text-align: center;
	}
}

/* --- باکس «مدیریت لیست مهارت‌ها» (فقط مدیر مدرسه)، بالای صفحه «مهارت‌ها» --- */

.hex-skills-items-manage-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-skills-items-manage-title .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-primary);
}

.hex-skills-items-manage-desc {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

.hex-skills-items-manage-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.hex-skills-items-manage-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--hex-bg-page);
	border: 1.5px solid var(--hex-skill-color, var(--hex-primary));
	color: var(--hex-skill-color, var(--hex-primary));
	font-size: 12.5px;
	font-weight: 600;
}

.hex-skills-items-manage-chip-icon {
	display: inline-flex;
	align-items: center;
}

.hex-skills-items-manage-chip-icon .hex-icon {
	width: 13px;
	height: 13px;
}

.hex-skills-items-manage-chip-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-inline-start: 2px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	color: inherit;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.hex-skills-items-manage-chip-delete:hover {
	background: rgba(0, 0, 0, 0.16);
}

.hex-skills-items-manage-form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px;
	border-radius: 999px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-skills-items-manage-form:focus-within {
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 3px var(--hex-primary-soft);
}

.hex-skills-items-manage-input-wrap {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hex-skills-items-manage-input-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
	margin-inline-start: 4px;
}

.hex-skills-items-manage-input-icon .hex-icon {
	width: 15px;
	height: 15px;
}

.hex-skills-items-manage-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding-block: 10px;
	padding-inline: 6px 16px;
	border: none;
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--hex-text-primary);
}

.hex-skills-items-manage-input:focus {
	outline: none;
}

.hex-skills-items-manage-input::placeholder {
	color: var(--hex-text-muted);
}

.hex-skills-items-manage-form .hex-school-btn-primary {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	white-space: nowrap;
}

.hex-skills-items-manage-form .hex-school-btn-primary .hex-icon {
	width: 15px;
	height: 15px;
}

@media (max-width: 480px) {
	.hex-skills-items-manage-form {
		flex-wrap: wrap;
		border-radius: 16px;
		padding: 8px;
	}

	.hex-skills-items-manage-input-wrap {
		flex: 1 1 100%;
		padding: 2px 4px;
		border-radius: 12px;
		background: var(--hex-bg-card);
		border: 1px solid var(--hex-border-light);
	}

	.hex-skills-items-manage-form .hex-school-btn-primary {
		flex: 1 1 100%;
		justify-content: center;
		border-radius: 12px;
	}
}

/* --- کادر بالای صفحه «موارد قرآنی» --- */

.hex-quran-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding: 22px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	box-shadow: 0 10px 24px -8px rgba(var(--hex-primary-rgb), 0.45);
	color: var(--hex-text-on-primary);
}

.hex-quran-hero-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
}

.hex-quran-hero-icon .hex-icon {
	width: 26px;
	height: 26px;
	color: var(--hex-text-on-primary);
}

.hex-quran-hero-text h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
}

.hex-quran-hero-text p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
	.hex-quran-hero {
		flex-direction: column;
		text-align: center;
	}
}

/* --- کادرهای نمایش نام دانش‌آموزان کلاس انتخاب‌شده (بخش موارد قرآنی) --- */

.hex-quran-student-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.hex-quran-student-box {
	padding: 11px 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-primary-soft-hover) 100%);
	border: 1px solid rgba(var(--hex-primary-rgb), 0.35);
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.hex-quran-student-box:hover,
.hex-quran-student-box:focus-visible {
	background: linear-gradient(135deg, var(--hex-primary-soft-hover) 0%, rgba(var(--hex-primary-rgb), 0.35) 100%);
	box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}

.hex-quran-student-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--hex-primary-dark);
}

/* --- پاپ‌آپ نمایش جزئیات دانش‌آموز (بخش موارد قرآنی) --- */

.hex-quran-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	backdrop-filter: blur(2px);
}

.hex-quran-modal-overlay.is-open {
	display: flex;
}

.hex-quran-modal {
	background: var(--hex-bg-card);
	border-radius: 14px;
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
	direction: rtl;
	animation: hex-notification-modal-in 0.18s ease-out;
}

.hex-quran-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--hex-border);
	position: sticky;
	top: 0;
	background: var(--hex-bg-card);
	border-radius: 14px 14px 0 0;
}

.hex-quran-modal-header-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
	color: var(--hex-text-on-primary);
}

.hex-quran-modal-header-icon .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-quran-modal-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-quran-modal-close {
	flex: 0 0 auto;
	background: var(--hex-bg-soft);
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: var(--hex-text-secondary);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-quran-modal-close:hover {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-quran-modal-body {
	padding: 18px 20px 22px;
}

.hex-quran-modal-footer {
	display: flex;
	justify-content: flex-end;
	padding: 14px 20px 20px;
	border-top: 1px solid var(--hex-border);
}

.hex-quran-modal-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 22px;
	border: none;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
	color: var(--hex-text-on-primary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.hex-quran-modal-submit .hex-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.hex-quran-modal-submit:hover {
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-dark));
}

.hex-quran-modal-submit:active {
	transform: scale(0.98);
}

.hex-quran-modal-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hex-quran-modal-option {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hex-quran-modal-option-label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-quran-modal-select {
	width: 100%;
	padding: 9px 12px;
	border-radius: 9px;
	border: 1px solid var(--hex-border-strong);
	background: var(--hex-bg-page);
	font-size: 14px;
	color: var(--hex-text-heading);
	box-sizing: border-box;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-quran-modal-select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

.hex-quran-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 9px;
	border: 1px solid var(--hex-border-strong);
	background: var(--hex-bg-page);
	font-size: 14px;
	color: var(--hex-text-heading);
	cursor: pointer;
	width: fit-content;
}

.hex-quran-checkbox-label input[type="checkbox"] {
	width: 17px;
	height: 17px;
	cursor: pointer;
	accent-color: var(--hex-primary-light);
}

.hex-quran-modal-checkbox-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hex-quran-modal-checkbox-row .hex-quran-modal-option {
	flex: 1 1 160px;
}

.hex-quran-selected-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
}

.hex-quran-selected-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 6px;
	border-radius: 999px;
	background: rgba(26, 188, 156, 0.12);
	border: 1px solid rgba(26, 188, 156, 0.3);
	font-size: 13px;
	color: var(--hex-primary-dark);
}

.hex-quran-selected-item-name {
	font-weight: 600;
	line-height: 1;
}

.hex-quran-selected-item-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(26, 188, 156, 0.2);
	color: var(--hex-primary-dark);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-quran-selected-item-remove:hover,
.hex-quran-selected-item-remove:focus-visible {
	background: var(--hex-btn-danger-bg);
	color: var(--hex-text-on-primary);
	outline: none;
}

/* --- باکس «موارد قرآنی ثبت‌شده» زیر باکس انتخاب کلاس/دانش‌آموزان --- */

.hex-quran-records-box {
	margin-top: 20px;
	background: linear-gradient(180deg, var(--hex-primary-soft) 0%, var(--hex-bg-card) 55%);
	border-color: rgba(var(--hex-primary-rgb), 0.35);
	border-top: 4px solid var(--hex-primary);
}

.hex-quran-records-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--hex-primary-dark);
	margin: 0;
}

.hex-quran-records-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	flex-shrink: 0;
}

.hex-quran-records-icon .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-text-on-primary);
}

.hex-quran-records-student {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--hex-border);
}

.hex-quran-records-student:first-of-type {
	margin-top: 20px;
	padding-top: 0;
	border-top: none;
}

.hex-quran-records-student-name {
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--hex-text-primary);
}

.hex-quran-records-empty {
	margin: 0;
}

.hex-quran-records-row {
	padding: 13px 15px;
	border: 1px solid var(--hex-border);
	border-right: 3px solid var(--hex-primary);
	border-radius: 10px;
	background: var(--hex-bg-page);
	margin-bottom: 10px;
}

.hex-quran-records-row:last-child {
	margin-bottom: 0;
}

.hex-quran-records-line {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--hex-text-heading);
	line-height: 1.9;
}

.hex-quran-records-line:last-of-type {
	margin-bottom: 8px;
}

.hex-quran-records-label {
	font-weight: 700;
	color: var(--hex-primary-dark);
	margin-left: 6px;
}

.hex-quran-records-meta {
	margin: 0;
	font-size: 12px;
	color: var(--hex-text-secondary);
}

/* --- باکس «مهارت‌های ثبت‌شده» زیر لیست دانش‌آموزان بخش «مهارت‌ها» --- */

.hex-skills-records-box {
	margin-top: 20px;
	background: linear-gradient(180deg, var(--hex-primary-soft) 0%, var(--hex-bg-card) 55%);
	border-color: rgba(var(--hex-primary-rgb), 0.35);
	border-top: 4px solid var(--hex-primary);
	box-shadow: 0 6px 16px -6px rgba(var(--hex-primary-rgb), 0.25);
}

.hex-skills-records-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--hex-primary-dark);
	margin: 0;
}

.hex-skills-records-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	flex-shrink: 0;
}

.hex-skills-records-icon .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-text-on-primary);
}

.hex-skills-records-student {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--hex-border);
}

.hex-skills-records-student:first-of-type {
	margin-top: 20px;
	padding-top: 0;
	border-top: none;
}

.hex-skills-records-student-name {
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--hex-text-primary);
}

.hex-skills-records-empty {
	margin: 0;
}

.hex-skills-records-row {
	position: relative;
	padding: 13px 44px 13px 15px;
	border: 1px solid var(--hex-border);
	border-right: 3px solid var(--hex-primary);
	border-radius: 10px;
	background: var(--hex-bg-page);
	margin-bottom: 10px;
}

.hex-skills-records-row:last-child {
	margin-bottom: 0;
}

.hex-skills-records-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.hex-skills-records-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
	white-space: nowrap;
	background: var(--hex-primary);
}

.hex-skills-records-badge .hex-icon {
	width: 12px;
	height: 12px;
}

.hex-skills-records-meta {
	margin: 0;
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-skills-records-delete {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-skills-records-delete:hover {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-skills-records-delete svg {
	width: 14px;
	height: 14px;
}

/* --- کادرهای نمایش نام دانش‌آموزان کلاس انتخاب‌شده (بخش موارد انضباطی) --- */

.hex-discipline-student-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.hex-discipline-student-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-bg-page) 100%);
	border: 1px solid var(--hex-primary-soft-hover);
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.hex-discipline-student-btn {
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-discipline-student-btn:hover {
	border-color: var(--hex-primary-light);
	box-shadow: 0 4px 12px rgba(22, 160, 133, 0.18);
	transform: translateY(-1px);
}

.hex-discipline-student-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--hex-primary-dark);
}

/* --- امتیاز انضباطی کنار نام دانش‌آموز: هر مورد مثبت ۱+ و هر مورد منفی ۱-
   امتیاز محسوب می‌شود؛ رنگ نشان بسته به مثبت/منفی/صفر بودن مجموع تغییر می‌کند. --- */
.hex-discipline-score-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	direction: ltr;
}

.hex-discipline-score-badge.is-positive {
	background: var(--hex-color-success-bg);
	color: var(--hex-color-success-light);
}

.hex-discipline-score-badge.is-negative {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-discipline-score-badge.is-neutral {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

/* --- کادرهای نمایش نام دانش‌آموزان کلاس انتخاب‌شده (بخش مهارت‌ها) --- */

.hex-skills-student-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.hex-skills-student-box {
	padding: 11px 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-primary-soft-hover) 100%);
	border: 1px solid rgba(var(--hex-primary-rgb), 0.35);
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.hex-skills-student-btn {
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-skills-student-btn:hover {
	border-color: var(--hex-primary-light);
	box-shadow: 0 4px 12px rgba(var(--hex-primary-rgb), 0.18);
	transform: translateY(-1px);
}

.hex-skills-student-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--hex-primary-dark);
}

.hex-discipline-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-discipline-modal-overlay.is-open {
	display: flex;
}

.hex-discipline-modal {
	background: var(--hex-bg-card);
	border-radius: 14px;
	width: 100%;
	max-width: 420px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
	direction: rtl;
}

.hex-discipline-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	border-radius: 14px 14px 0 0;
}

.hex-discipline-modal-title {
	margin: 0;
	color: var(--hex-text-on-primary);
	font-size: 16px;
	font-weight: 700;
	word-break: break-word;
}

.hex-discipline-modal-close {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	color: var(--hex-text-on-primary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease;
}

.hex-discipline-modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.hex-discipline-modal-body {
	padding: 18px 20px 22px;
	color: var(--hex-text-heading);
}

.hex-discipline-modal-body label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hex-btn-secondary-text);
}

.hex-discipline-modal-body select {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-discipline-modal-body select:focus {
	outline: none;
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.15);
	background: var(--hex-bg-card);
}

[data-hex-theme="dark"] .hex-discipline-student-name {
	color: #4ade80;
}

[data-hex-theme="dark"] .hex-discipline-modal-body select {
	color: #ffffff;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] .hex-discipline-modal-body select option {
	color: #0f172a;
}

.hex-discipline-modal-body .hex-school-form-actions {
	justify-content: center;
}

.hex-discipline-modal-body .hex-school-form-actions .hex-school-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* --- پاپ‌آپ کلیک روی نام دانش‌آموز (بخش مهارت‌ها) --- */

.hex-skills-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-skills-modal-overlay.is-open {
	display: flex;
}

.hex-skills-modal {
	background: var(--hex-bg-card);
	border-radius: 14px;
	width: 100%;
	max-width: 420px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
	direction: rtl;
}

.hex-skills-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	border-radius: 14px 14px 0 0;
}

.hex-skills-modal-title {
	margin: 0;
	color: var(--hex-text-on-primary);
	font-size: 16px;
	font-weight: 700;
	word-break: break-word;
}

.hex-skills-modal-close {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	color: var(--hex-text-on-primary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease;
}

.hex-skills-modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.hex-skills-modal-body {
	padding: 18px 20px 22px;
	color: var(--hex-text-heading);
}

.hex-skills-save-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.hex-skills-save-btn .hex-icon {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

/* --- باکس «موارد انضباطی ثبت‌شده» زیر فرم ثبت مورد انضباطی --- */

.hex-discipline-records-box {
	margin-top: 20px;
	background: linear-gradient(180deg, var(--hex-primary-soft) 0%, var(--hex-bg-card) 55%);
	border-color: #bfe9dc;
	border-top: 4px solid var(--hex-primary);
}

.hex-discipline-records-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--hex-primary-dark);
}

.hex-discipline-records-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	flex-shrink: 0;
}

.hex-discipline-records-icon .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-text-on-primary);
}

.hex-discipline-type-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
	white-space: nowrap;
}

.hex-discipline-type-badge.hex-discipline-type-positive {
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
}

.hex-discipline-type-badge.hex-discipline-type-negative {
	background: linear-gradient(135deg, var(--hex-color-error), var(--hex-color-error));
}

.hex-discipline-records-student-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.hex-discipline-records-student-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-bg-page) 100%);
	border: 1px solid var(--hex-primary-soft-hover);
	text-align: center;
	font-family: inherit;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.hex-discipline-records-student-item .hex-discipline-student-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--hex-primary-dark);
}

.hex-discipline-records-student-btn {
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-discipline-records-student-btn:hover {
	border-color: var(--hex-primary-light);
	box-shadow: 0 4px 12px rgba(22, 160, 133, 0.18);
	transform: translateY(-1px);
}

[data-hex-theme="dark"] .hex-discipline-records-student-item .hex-discipline-student-name {
	color: #4ade80;
}

.hex-discipline-view-modal-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* --- خلاصه‌ی امتیازی («تعداد مثبت»، «تعداد منفی»، «امتیاز نهایی») بالای لیست
   موارد انضباطی هر دانش‌آموز داخل پاپ‌آپ «مشاهده» --- */
.hex-discipline-view-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 4px;
}

.hex-discipline-summary-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 8px;
	border-radius: 10px;
	background: var(--hex-bg-soft);
}

.hex-discipline-summary-label {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--hex-text-secondary);
}

.hex-discipline-summary-value {
	font-size: 17px;
	font-weight: 800;
	direction: ltr;
}

.hex-discipline-summary-positive .hex-discipline-summary-value {
	color: var(--hex-color-success-light);
}

.hex-discipline-summary-negative .hex-discipline-summary-value {
	color: var(--hex-color-error);
}

.hex-discipline-summary-net.hex-discipline-summary-net-positive .hex-discipline-summary-value {
	color: var(--hex-color-success-light);
}

.hex-discipline-summary-net.hex-discipline-summary-net-negative .hex-discipline-summary-value {
	color: var(--hex-color-error);
}

.hex-discipline-summary-net.hex-discipline-summary-net-neutral .hex-discipline-summary-value {
	color: var(--hex-text-secondary);
}

@media (max-width: 420px) {
	.hex-discipline-view-summary {
		gap: 6px;
	}

	.hex-discipline-summary-stat {
		padding: 8px 4px;
	}

	.hex-discipline-summary-label {
		font-size: 10.5px;
	}

	.hex-discipline-summary-value {
		font-size: 15px;
	}
}

.hex-discipline-view-row {
	position: relative;
	padding: 13px 44px 13px 15px;
	border: 1px solid var(--hex-border);
	border-right: 3px solid var(--hex-border-strong);
	border-radius: 10px;
	background: var(--hex-bg-page);
	transition: border-color 0.15s ease;
}

.hex-discipline-records-delete {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-discipline-records-delete:hover {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-discipline-records-delete svg {
	width: 14px;
	height: 14px;
}

.hex-discipline-view-row--positive {
	border-right-color: var(--hex-primary);
}

.hex-discipline-view-row--negative {
	border-right-color: var(--hex-color-error);
}

.hex-discipline-view-items {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--hex-text-heading);
}

.hex-discipline-view-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-tuition-installments-table th:nth-child(1),
.hex-tuition-installments-table td:nth-child(1) {
	min-width: 60px;
}

.hex-tuition-installments-table th:nth-child(2),
.hex-tuition-installments-table td:nth-child(2) {
	min-width: 150px;
}

.hex-tuition-installments-table th:nth-child(3),
.hex-tuition-installments-table td:nth-child(3) {
	min-width: 170px;
}

.hex-tuition-installments-table th:nth-child(4),
.hex-tuition-installments-table td:nth-child(4) {
	min-width: 130px;
}

.hex-tuition-installments-table th:nth-child(5),
.hex-tuition-installments-table td:nth-child(5) {
	min-width: 150px;
}

/* --- داشبورد آماری بالای لیست شهریه (کارت‌ها + نمودارها) --- */

.hex-tuition-dashboard {
	margin-bottom: 24px;
}

/* رنگ اختصاصی هر کارت آماری شهریه، هم‌راستا با الگوی کارت‌های داشبورد کلی مدیر.
 * توجه: انتخابگرها عمداً با «.hex-dashboard-stat-card» ترکیب شده‌اند (specificity
 * بالاتر از قانون عمومی هم‌نام) تا صرف‌نظر از ترتیب قرارگیری در فایل، همیشه رنگ
 * پررنگ اختصاصی به‌جای پس‌زمینه‌ی کم‌رنگ پیش‌فرض اعمال شود؛ در غیر این‌صورت متن
 * سفید روی پس‌زمینه‌ی کم‌رنگ ناخوانا می‌شود. */
.hex-dashboard-stat-card.hex-tuition-stat-card--total {
	background: var(--hex-color-info);
	border-color: var(--hex-color-info);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--total .hex-dashboard-stat-icon {
	background: rgba( 255, 255, 255, 0.22 );
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--total .hex-dashboard-stat-number,
.hex-dashboard-stat-card.hex-tuition-stat-card--total .hex-dashboard-stat-label {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--paid {
	background: var(--hex-color-success);
	border-color: var(--hex-color-success);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--paid .hex-dashboard-stat-icon {
	background: rgba( 255, 255, 255, 0.22 );
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--paid .hex-dashboard-stat-number,
.hex-dashboard-stat-card.hex-tuition-stat-card--paid .hex-dashboard-stat-label {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--remaining {
	background: #ea580c;
	border-color: #ea580c;
}

.hex-dashboard-stat-card.hex-tuition-stat-card--remaining .hex-dashboard-stat-icon {
	background: rgba( 255, 255, 255, 0.22 );
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--remaining .hex-dashboard-stat-number,
.hex-dashboard-stat-card.hex-tuition-stat-card--remaining .hex-dashboard-stat-label {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--settled {
	background: var(--hex-primary-dark);
	border-color: var(--hex-primary-dark);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--settled .hex-dashboard-stat-icon {
	background: rgba( 255, 255, 255, 0.22 );
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--settled .hex-dashboard-stat-number,
.hex-dashboard-stat-card.hex-tuition-stat-card--settled .hex-dashboard-stat-label {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--overdue {
	background: var(--hex-color-error);
	border-color: var(--hex-color-error);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--overdue .hex-dashboard-stat-icon {
	background: rgba( 255, 255, 255, 0.22 );
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card.hex-tuition-stat-card--overdue .hex-dashboard-stat-number,
.hex-dashboard-stat-card.hex-tuition-stat-card--overdue .hex-dashboard-stat-label {
	color: var(--hex-text-on-primary);
}

.hex-tuition-list-table td:nth-child(5) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

/* جلوگیری از سرریز افقی مبالغ بزرگ (تومان) داخل کارت‌های آماری شهریه در صفحات باریک */
.hex-tuition-stats .hex-dashboard-stat-card {
	min-width: 0;
}

.hex-tuition-stats .hex-dashboard-stat-number {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hex-tuition-donut-wrap {
	height: 220px;
	max-width: 320px;
	margin: 6px auto 0;
}

/* --- نوار پیشرفت جمع‌وجور داخل ردیف جدول لیست شهریه --- */

.hex-tuition-row-progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 150px;
}

.hex-tuition-row-progress-track {
	position: relative;
	width: 100%;
	height: 8px;
	border-radius: 6px;
	background: var(--hex-border);
	overflow: hidden;
}

.hex-tuition-row-progress-fill {
	height: 100%;
	border-radius: 6px;
	background: var(--hex-color-success);
	transition: width 0.3s ease;
}

.hex-tuition-row-progress--pending .hex-tuition-row-progress-fill {
	background: var(--hex-color-warning);
}

.hex-tuition-row-progress--overdue .hex-tuition-row-progress-fill {
	background: var(--hex-color-error);
}

.hex-tuition-row-progress-text {
	font-size: 12px;
	color: var(--hex-text-secondary);
	white-space: nowrap;
}

/* --- نشان‌های رنگی وضعیت (تسویه‌شده/در حال پرداخت/معوق) --- */

.hex-tuition-badge--settled {
	background: var(--hex-color-success);
	color: var(--hex-text-on-primary);
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-tuition-badge--pending {
	background: var(--hex-color-warning);
	color: var(--hex-text-on-primary);
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-tuition-badge--overdue {
	background: var(--hex-color-error);
	color: var(--hex-text-on-primary);
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-tuition-status-pill {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-tuition-status-pill--settled {
	background: #dcfce7;
	color: #166534;
}

.hex-tuition-status-pill--pending {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning-text);
}

.hex-tuition-status-pill--overdue {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error-text);
}

/* --- کارت‌های فشرده لیست شهریه (جایگزین جدول، بدون نیاز به اسکرول افقی) --- */

.hex-tuition-card-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hex-tuition-card {
	border: 1px solid #dbe7f5;
	border-radius: 16px;
	background: var(--hex-bg-card);
	padding: 14px 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hex-tuition-card:hover {
	border-color: #93c5fd;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.hex-tuition-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hex-tuition-card-link,
.hex-tuition-card-link:hover,
.hex-tuition-card-link:focus,
.hex-tuition-card-link:visited {
	text-decoration: none !important;
}

.hex-tuition-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.hex-tuition-card-student {
	text-align: right;
}

.hex-tuition-card-name {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 800;
	color: #2563eb;
}

[data-hex-theme="dark"] .hex-tuition-card-name {
	color: #ffffff;
}

.hex-tuition-card-class {
	font-size: 13px;
	color: var(--hex-text-secondary);
}

.hex-tuition-card-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.hex-tuition-card-payment {
	font-size: 13px;
	color: var(--hex-text-secondary);
	white-space: nowrap;
}

.hex-tuition-card-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--hex-border-light);
}

@media ( max-width: 480px ) {

	.hex-tuition-card-top {
		flex-direction: column;
	}

	.hex-tuition-card-meta {
		align-items: flex-end;
		width: 100%;
	}
}

/* --- سربرگ صفحه جزئیات طرح شهریه (نام دانش‌آموز + کلاس) --- */

.hex-tuition-details-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.hex-tuition-details-header h3 {
	margin: 0;
}

.hex-tuition-details-class {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 20px;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 13px;
}

.hex-tuition-details-class .hex-icon {
	width: 15px;
	height: 15px;
}

/* --- کارت‌های خلاصه مالی طرح شهریه (کل/دریافتی/مانده) + نوار پیشرفت --- */

.hex-tuition-summary-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 14px;
	margin-bottom: 14px;
}

.hex-tuition-summary-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: 12px;
	color: var(--hex-text-on-primary);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hex-tuition-summary-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 15, 23, 42, 0.08 );
}

.hex-tuition-summary-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.2 );
}

.hex-tuition-summary-icon .hex-icon {
	width: 20px;
	height: 20px;
}

.hex-tuition-summary-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hex-tuition-summary-value {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.hex-tuition-summary-value small {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.85;
}

.hex-tuition-summary-label {
	font-size: 12px;
	color: rgba( 255, 255, 255, 0.9 );
}

.hex-tuition-summary-card--total {
	background: var(--hex-color-info);
}

.hex-tuition-summary-card--paid {
	background: var(--hex-color-success);
}

.hex-tuition-summary-card--settled {
	background: var(--hex-primary-dark);
}

.hex-tuition-summary-card--pending {
	background: #ea580c;
}

.hex-tuition-summary-card--overdue {
	background: var(--hex-color-error);
}

.hex-tuition-progress-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
}

.hex-tuition-progress-track {
	position: relative;
	flex: 1 1 auto;
	height: 12px;
	border-radius: 8px;
	background: var(--hex-border);
	overflow: hidden;
}

.hex-tuition-progress-fill {
	height: 100%;
	border-radius: 8px;
	background: var(--hex-color-success);
	transition: width 0.4s ease;
}

.hex-tuition-progress-fill--pending {
	background: var(--hex-color-warning);
}

.hex-tuition-progress-fill--overdue {
	background: var(--hex-color-error);
}

.hex-tuition-progress-percent {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--hex-btn-secondary-text);
	min-width: 42px;
	text-align: center;
}

@media ( max-width: 640px ) {

	.hex-tuition-donut-wrap {
		max-width: 100%;
		height: 200px;
	}

	.hex-tuition-charts .hex-dashboard-chart-canvas-wrap {
		height: 200px;
	}

	/* روی موبایل، کارت‌های آماری شهریه تک‌ستونه و جمع‌وجورتر می‌شوند تا اسکرول
	   افقی ایجاد نکنند (specificity جامع عمداً برای غلبه بر قانون کلی
	   «.hex-dashboard-stats» دو‌ستونه در همین بازه است). */
	.hex-dashboard-stats.hex-tuition-stats {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.hex-tuition-stats .hex-dashboard-stat-card {
		padding: 13px 14px;
		gap: 12px;
	}

	.hex-tuition-stats .hex-dashboard-stat-icon {
		width: 38px;
		height: 38px;
	}

	.hex-tuition-stats .hex-dashboard-stat-icon .hex-icon {
		width: 18px;
		height: 18px;
	}

	.hex-tuition-stats .hex-dashboard-stat-number {
		font-size: 19px;
	}

	.hex-tuition-summary-cards {
		grid-template-columns: 1fr;
	}

	.hex-tuition-summary-card {
		padding: 13px 14px;
	}

	.hex-tuition-progress-wrap {
		flex-wrap: wrap;
	}
}

/* ===================== پرداخت مبلغ دلخواه شهریه (بخش نمایش اطلاعات هر کاربر) ===================== */

.hex-tuition-custom-payment-box {
	margin-bottom: 22px;
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
}

.hex-tuition-custom-payment-box--standalone {
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.hex-tuition-custom-payment-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 15.5px;
}

.hex-tuition-custom-payment-title .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-primary);
}

.hex-tuition-custom-payment-hint {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--hex-text-secondary);
}

.hex-tuition-custom-payment-grid {
	display: flex;
	align-items: flex-end;
	gap: 8px 14px;
	flex-wrap: wrap;
}

.hex-tuition-custom-payment-grid p {
	margin: 0;
}

.hex-tuition-custom-payment-grid p:first-child {
	flex: 1 1 220px;
	max-width: 320px;
}

.hex-tuition-custom-payment-note {
	flex: 1 1 100%;
}

.hex-tuition-custom-payment-grid input[type="text"] {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-card);
	font-size: 14px;
	font-family: inherit;
	line-height: 1.7;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-tuition-custom-payment-grid input[type="text"]:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

.hex-tuition-custom-payment-grid label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
}

.hex-tuition-custom-payment-grid label .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-tuition-custom-payment-grid input[type="number"] {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-card);
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-tuition-custom-payment-grid input[type="number"]:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

.hex-tuition-custom-payment-submit {
	flex: 0 0 auto;
}

[data-hex-theme="dark"] .hex-tuition-custom-payment-grid input[type="text"],
[data-hex-theme="dark"] .hex-tuition-custom-payment-grid input[type="number"] {
	color: var(--hex-text-primary);
}

@media ( max-width: 640px ) {

	.hex-tuition-custom-payment-grid {
		flex-direction: column;
		align-items: stretch;
	}

	.hex-tuition-custom-payment-grid p:first-child,
	.hex-tuition-custom-payment-note,
	.hex-tuition-custom-payment-submit {
		flex: 0 0 auto;
		max-width: none;
	}

	.hex-tuition-custom-payment-submit .hex-school-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ===================== ثبت‌نام دانش‌آموز/والد (فاز 10 + بازطراحی) ===================== */

/* این صفحات (ثبت‌نام دانش‌آموز/معلم/والد) قبلاً با max-width: 860px محدود و
   وسط‌چین بودند که در دسکتاپ نسبت به بقیه‌ی صفحات (که کل عرض ناحیه‌ی محتوا را
   می‌گیرند) خیلی باریک و نامتناسب به نظر می‌رسیدند؛ حالا کل عرض موجود را
   می‌گیرند، درست مثل صفحات لیست/جدول. */
.hex-enroll-page {
	max-width: 100%;
}

/* --- هدر بنری بالای فرم --- */

.hex-enroll-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding: 22px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	box-shadow: 0 10px 24px -8px rgba(var(--hex-primary-rgb), 0.45);
	color: var(--hex-text-on-primary);
}

.hex-enroll-hero-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
}

.hex-enroll-hero-icon .hex-icon {
	width: 26px;
	height: 26px;
	color: var(--hex-text-on-primary);
}

.hex-enroll-hero-text h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
}

.hex-enroll-hero-text p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
}

/* --- کارت‌های بخش‌بندی فرم --- */

.hex-enroll-card {
	margin-bottom: 20px;
	padding: 22px 24px 24px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.08);
	transition: box-shadow 0.2s ease;
}

.hex-enroll-card:hover {
	box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.12);
}

.hex-enroll-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px dashed #dbe7e3;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-primary-dark);
}

.hex-enroll-card-title .hex-icon {
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-enroll-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	color: var(--hex-text-on-primary);
	font-size: 13px;
	font-weight: 700;
}

/* --- گرید دو ستونه‌ی واکنش‌گرا برای فیلدهای فرم ثبت‌نام --- */

.hex-enroll-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 20px;
}

.hex-enroll-grid .hex-grid-full,
.hex-enroll-grid-full {
	grid-column: 1 / -1;
}

/* در صفحه‌های عریض دسکتاپ، حالا که .hex-enroll-page دیگر عرض محدود ندارد،
   فیلدها در ۳ ستون چیده می‌شوند تا فضای اضافه هدر نرود. */
@media (min-width: 1100px) {
	.hex-enroll-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media (max-width: 640px) {
	.hex-enroll-grid {
		grid-template-columns: 1fr;
	}

	.hex-enroll-hero {
		flex-direction: column;
		text-align: center;
	}
}

.hex-enroll-page label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-text-heading);
}

.hex-enroll-page label .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

.hex-enroll-page input[type="text"],
.hex-enroll-page input[type="email"],
.hex-enroll-page input[type="password"],
.hex-enroll-page input[type="number"],
.hex-enroll-page select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	font-family: inherit;
	font-size: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-enroll-page input[type="text"]:focus,
.hex-enroll-page input[type="email"]:focus,
.hex-enroll-page input[type="password"]:focus,
.hex-enroll-page input[type="number"]:focus,
.hex-enroll-page select:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}

[data-hex-theme="dark"] .hex-enroll-page input[type="text"],
[data-hex-theme="dark"] .hex-enroll-page input[type="email"],
[data-hex-theme="dark"] .hex-enroll-page input[type="password"],
[data-hex-theme="dark"] .hex-enroll-page input[type="number"],
[data-hex-theme="dark"] .hex-enroll-page select {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-enroll-page select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] .hex-enroll-page select option {
	color: #0f172a;
}

[data-hex-theme="dark"] .hex-enroll-page .hex-jalali-date .hex-jalali-year,
[data-hex-theme="dark"] .hex-enroll-page .hex-jalali-date .hex-jalali-day,
[data-hex-theme="dark"] .hex-enroll-page .hex-jalali-date .hex-jalali-month {
	color: #ffffff;
}

/* --- ردیف آپلود عکس --- */

.hex-enroll-photo-row {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px dashed var(--hex-primary-light);
	border-radius: 12px;
	background: var(--hex-primary-soft);
}

.hex-enroll-photo-row .hex-photo-upload-preview {
	width: 72px;
	height: 72px;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 2px var(--hex-primary-light);
}

[data-hex-theme="dark"] .hex-enroll-photo-row {
	border-color: var(--hex-border);
	background: var(--hex-bg-soft);
}

/* --- کارت‌های انتخاب حالت ثبت والد --- */

.hex-enroll-parent-mode {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}

@media (max-width: 640px) {
	.hex-enroll-parent-mode {
		grid-template-columns: 1fr;
	}
}

.hex-enroll-parent-mode label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px 14px;
	border: 1.5px solid var(--hex-border);
	border-radius: 12px;
	background: var(--hex-bg-page);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.hex-enroll-parent-mode label:hover {
	border-color: var(--hex-primary-light);
	background: var(--hex-primary-soft-hover);
}

[data-hex-theme="dark"] .hex-enroll-parent-mode label {
	background: var(--hex-bg-soft);
	border-color: var(--hex-border-strong);
}

[data-hex-theme="dark"] .hex-enroll-parent-mode label:hover {
	border-color: var(--hex-primary-light);
	background: var(--hex-primary-soft);
}

.hex-enroll-parent-mode input[type="radio"] {
	margin-top: 3px;
	accent-color: var(--hex-primary);
	flex-shrink: 0;
}

.hex-enroll-parent-mode-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--hex-primary-soft);
}

[data-hex-theme="dark"] .hex-enroll-parent-mode-icon {
	background: var(--hex-primary-soft);
}

.hex-enroll-parent-mode-icon .hex-icon {
	width: 16px;
	height: 16px;
	color: var(--hex-primary);
}

.hex-enroll-parent-mode-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hex-enroll-parent-mode-text strong {
	font-size: 13.5px;
	color: var(--hex-text-heading);
}

.hex-enroll-parent-mode-text small {
	font-size: 12px;
	color: var(--hex-text-secondary);
	font-weight: 400;
}

.hex-enroll-parent-mode label:has(input:checked) {
	border-color: var(--hex-primary);
	background: var(--hex-primary-soft);
	box-shadow: 0 0 0 3px rgba(var(--hex-primary-rgb), 0.12);
}

.hex-enroll-parent-mode label:has(input:disabled) {
	opacity: 0.5;
	cursor: not-allowed;
}

.hex-enroll-parent-existing,
.hex-enroll-parent-new {
	margin-top: 4px;
	padding-top: 18px;
	border-top: 1px dashed var(--hex-border);
}

/* --- ردیف دکمه‌ی ارسال --- */

.hex-enroll-actions {
	position: sticky;
	bottom: 0;
	margin-top: 4px;
	padding: 16px 4px 4px;
	justify-content: flex-end;
}

.hex-enroll-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	border-color: transparent;
	box-shadow: 0 8px 18px -6px rgba(var(--hex-primary-rgb), 0.5);
}

.hex-enroll-submit-btn:hover {
	background: linear-gradient(135deg, var(--hex-primary-dark), var(--hex-primary));
	box-shadow: 0 10px 22px -6px rgba(var(--hex-primary-rgb), 0.6);
}

.hex-enroll-submit-btn .hex-icon {
	width: 17px;
	height: 17px;
	color: var(--hex-text-on-primary);
}

/* ===================== ورود کاربر (بازطراحی مدرن) ===================== */

.hex-school-login-box {
	position: relative;
	z-index: 1;
	max-width: 380px;
	width: 100%;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 20px;
	padding: 36px 32px;
	text-align: right;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.hex-school-login-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--hex-primary-light) 0%, var(--hex-primary) 100%);
	color: var(--hex-text-on-primary);
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(22, 160, 133, 0.28);
}

.hex-school-login-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hex-school-login-logo .hex-icon {
	width: 30px;
	height: 30px;
}

.hex-school-login-box h2 {
	margin: 0 0 4px;
	color: var(--hex-text-primary);
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}

.hex-school-login-subtitle {
	margin: 0 0 26px;
	text-align: center;
	color: var(--hex-text-secondary);
	font-size: 13px;
}

.hex-school-login-field {
	margin-bottom: 16px;
}

.hex-school-login-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hex-btn-secondary-text);
}

.hex-school-login-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--hex-border);
	border-radius: 12px;
	padding: 0 14px;
	background: var(--hex-bg-page);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-school-login-input-wrap:focus-within {
	border-color: var(--hex-primary);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.12);
}

.hex-school-login-input-wrap .hex-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--hex-text-muted);
}

.hex-school-login-box input[type="text"],
.hex-school-login-box input[type="password"] {
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
	border: none;
	background: transparent;
	padding: 12px 0;
	font-size: 14px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

/* رفع مشکل «حاشیه‌ی سفید دور کادر که از گوشه‌های گرد بیرون می‌زند»:
   برخی مرورگرها (به‌خصوص Safari/iOS) هنگام فوکوس روی input یک outline/
   حلقه‌ی فوکوس پیش‌فرض رسم می‌کنند که مربعی‌ست و با border-radius کادر
   هماهنگ نیست، پس از لبه‌های گرد بیرون می‌زند. چون این حلقه گاهی با
   specificity بالاتر از قوانین قالب فعال سایت رندر می‌شود، این‌جا با
   !important به‌صورت قطعی خاموش می‌شود؛ حالت فوکوس واقعی از طریق
   .hex-school-login-input-wrap:focus-within (border سبز + سایه‌ی نرم دور
   کل کادر گرد) نمایش داده می‌شود، نه outline خودِ input. */
.hex-school-login-box input[type="text"]:focus,
.hex-school-login-box input[type="password"]:focus,
.hex-school-login-box input[type="text"]:focus-visible,
.hex-school-login-box input[type="password"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.hex-school-login-input-wrap {
	outline: none;
}

/* رفع مشکل «پس‌زمینه‌ی آبی/بنفشِ ناخواسته» هنگام استفاده از رمزهای ذخیره‌شده‌ی
   مرورگر (Autofill): مرورگر به‌صورت پیش‌فرض رنگ‌آمیزی خودش را روی پس‌زمینه‌ی
   input تحمیل می‌کند که با طرح یکدست کادر ناهماهنگ است. با ترفند استاندارد
   box-shadow داخلیِ بسیار بزرگ (inset) به رنگ پس‌زمینه‌ی خودِ کادر، این
   رنگ‌آمیزی پیش‌فرض مرورگر عملاً بی‌اثر می‌شود و کادر یکدست باقی می‌ماند. */
.hex-school-login-box input[type="text"]:-webkit-autofill,
.hex-school-login-box input[type="password"]:-webkit-autofill,
.hex-school-login-box input[type="text"]:-webkit-autofill:hover,
.hex-school-login-box input[type="password"]:-webkit-autofill:hover,
.hex-school-login-box input[type="text"]:-webkit-autofill:focus,
.hex-school-login-box input[type="password"]:-webkit-autofill:focus,
.hex-school-login-box input[type="text"]:-webkit-autofill:active,
.hex-school-login-box input[type="password"]:-webkit-autofill:active {
	-webkit-text-fill-color: var(--hex-text-primary) !important;
	caret-color: var(--hex-text-primary);
	-webkit-box-shadow: 0 0 0 1000px var(--hex-bg-page) inset !important;
	box-shadow: 0 0 0 1000px var(--hex-bg-page) inset !important;
	transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

.hex-school-login-input-wrap:focus-within input[type="text"]:-webkit-autofill,
.hex-school-login-input-wrap:focus-within input[type="password"]:-webkit-autofill,
.hex-school-login-input-wrap:focus-within input[type="text"]:-webkit-autofill:hover,
.hex-school-login-input-wrap:focus-within input[type="password"]:-webkit-autofill:hover,
.hex-school-login-input-wrap:focus-within input[type="text"]:-webkit-autofill:focus,
.hex-school-login-input-wrap:focus-within input[type="password"]:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--hex-bg-card) inset !important;
	box-shadow: 0 0 0 1000px var(--hex-bg-card) inset !important;
}

.hex-school-login-toggle-password {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: none;
	background: none;
	color: var(--hex-text-muted);
	cursor: pointer;
	transition: color 0.15s ease;
}

.hex-school-login-toggle-password:hover,
.hex-school-login-toggle-password:focus-visible,
.hex-school-login-toggle-password.is-visible {
	color: var(--hex-primary);
}

.hex-school-login-box .hex-school-form-actions {
	margin-top: 22px;
}

.hex-school-login-box .hex-school-btn-primary {
	width: 100%;
	justify-content: center;
	padding: 12px 20px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hex-primary-light) 0%, var(--hex-primary) 100%);
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(22, 160, 133, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-school-login-box .hex-school-btn-primary:hover {
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-dark) 100%);
	box-shadow: 0 10px 24px rgba(22, 160, 133, 0.32);
	transform: translateY(-1px);
}

.hex-school-login-box .hex-school-btn-primary:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	box-shadow: none;
	transform: none;
}

/* ===== اسلایدر «تایید انسانی» صفحه ورود (امنیت ورود در برابر ربات‌ها) ===== */

.hex-school-human-field {
	margin-bottom: 8px;
}

.hex-school-human-slider {
	user-select: none;
	-webkit-user-select: none;
}

.hex-school-human-track {
	position: relative;
	height: 46px;
	border-radius: 23px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	overflow: visible;
	transition: border-color 0.15s ease;
}

.hex-school-human-slider.is-verified .hex-school-human-track {
	border-color: var(--hex-color-success);
}

.hex-school-human-slider.is-error .hex-school-human-track {
	border-color: var(--hex-color-error);
}

.hex-school-human-fill {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 23px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-primary-soft-hover) 100%);
	transition: width 0.05s linear;
	pointer-events: none;
}

.hex-school-human-slider.is-verified .hex-school-human-fill {
	background: linear-gradient(135deg, var(--hex-color-success-bg) 0%, var(--hex-color-success-light) 100%);
}

/* فلش‌های راهنمای جهت کشیدن: سه فلش که پشت‌سرهم به سمت دایره‌ی چشمک‌زن حرکت
   می‌کنند، محو می‌شوند و دوباره از نقطه‌ی شروع تکرار می‌شوند؛ فقط در حالت آماده
   (پیش از شروع کشیدن) نمایش داده می‌شوند. */
.hex-school-human-hint {
	position: absolute;
	inset-inline-start: 58px;
	inset-inline-end: 26px;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	z-index: 1;
	transition: opacity 0.15s ease;
}

.hex-school-human-slider.is-ready .hex-school-human-hint {
	opacity: 1;
}

.hex-school-human-slider.is-dragging .hex-school-human-hint,
.hex-school-human-slider.is-verified .hex-school-human-hint,
.hex-school-human-slider.is-loading .hex-school-human-hint,
.hex-school-human-slider.is-error .hex-school-human-hint {
	opacity: 0;
}

.hex-school-human-hint-arrow {
	width: 9px;
	height: 9px;
	border-left: 2px solid var(--hex-primary-light);
	border-bottom: 2px solid var(--hex-primary-light);
	transform: rotate(45deg);
	opacity: 0;
	animation: hexHumanHintMove 1.6s ease-in-out infinite;
}

.hex-school-human-hint-arrow:nth-child(2) {
	animation-delay: 0.22s;
}

.hex-school-human-hint-arrow:nth-child(3) {
	animation-delay: 0.44s;
}

@keyframes hexHumanHintMove {
	0% {
		opacity: 0;
		transform: translateX(10px) rotate(45deg);
	}
	18% {
		opacity: 1;
		transform: translateX(0) rotate(45deg);
	}
	55% {
		opacity: 0;
		transform: translateX(-18px) rotate(45deg);
	}
	100% {
		opacity: 0;
		transform: translateX(-18px) rotate(45deg);
	}
}

.hex-school-human-target {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--hex-primary);
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.15s ease;
	animation: hexHumanTargetBlink 1.3s ease-in-out infinite;
}

.hex-school-human-target::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--hex-primary);
	animation: hexHumanTargetRing 1.3s ease-out infinite;
}

@keyframes hexHumanTargetBlink {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.45;
		transform: scale(0.82);
	}
}

@keyframes hexHumanTargetRing {
	0% {
		opacity: 0.7;
		transform: scale(0.6);
	}
	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

.hex-school-human-slider.is-verified .hex-school-human-target,
.hex-school-human-slider.is-loading .hex-school-human-target {
	opacity: 0;
	animation: none;
}

.hex-school-human-handle {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--hex-primary-light) 0%, var(--hex-primary) 100%);
	color: var(--hex-text-on-primary);
	box-shadow: 0 6px 16px rgba(22, 160, 133, 0.32);
	cursor: grab;
	touch-action: none;
	z-index: 2;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}

.hex-school-human-handle .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-school-human-handle .hex-icon:first-child {
	transform: scaleX(-1);
}

.hex-school-human-handle .hex-icon:last-child {
	display: none;
}

.hex-school-human-slider.is-verified .hex-school-human-handle {
	background: linear-gradient(135deg, var(--hex-color-success-light) 0%, var(--hex-color-success) 100%);
	cursor: default;
}

.hex-school-human-slider.is-verified .hex-school-human-handle .hex-icon:first-child {
	display: none;
}

.hex-school-human-slider.is-verified .hex-school-human-handle .hex-icon:last-child {
	display: block;
}

.hex-school-human-slider.is-dragging .hex-school-human-handle {
	cursor: grabbing;
	box-shadow: 0 8px 20px rgba(22, 160, 133, 0.4);
}

.hex-school-human-slider.is-loading .hex-school-human-handle {
	opacity: 0.5;
	cursor: wait;
}

.hex-school-human-handle:focus-visible {
	outline: 2px solid var(--hex-primary);
	outline-offset: 2px;
}

.hex-school-human-status {
	margin: 8px 2px 0;
	font-size: 12px;
	color: var(--hex-text-muted);
	min-height: 16px;
}

.hex-school-human-slider.is-verified .hex-school-human-status {
	color: var(--hex-color-success);
}

.hex-school-human-slider.is-error .hex-school-human-status {
	color: var(--hex-color-error);
}

/* فیلد Honeypot: فقط برای ربات‌هایی که به‌صورت خودکار همه‌ی فیلدهای فرم را پر
   می‌کنند قابل‌مشاهده/تشخیص است؛ با display:none مخفی نشده تا برخی ربات‌های
   ساده که آن تکنیک را نادیده می‌گیرند هم فریب بخورند، ولی برای انسان (چه با
   ماوس چه صفحه‌خوان) کاملاً از دسترس خارج است. */
.hex-school-hp-field {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
}

.hex-avatar {
	border-radius: 50%;
	object-fit: cover;
	background: var(--hex-border);
	vertical-align: middle;
}

.hex-avatar-initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hex-primary);
	color: var(--hex-text-on-primary);
	font-weight: bold;
	font-family: inherit;
	user-select: none;
	flex-shrink: 0;
}

/* --- نمای «پروفایل» کاربر --- */

.hex-profile-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	/* گرادیان سبز ثابت (۴ کد رنگ هاردکد) جایگزین توکن‌های پالت شد تا با
	   تغییر پالت (روشن/آبی/تیره) هماهنگ بماند؛ افکت متحرک شیمر حفظ شد. */
	background: linear-gradient(135deg, var(--hex-primary-light) 0%, var(--hex-primary) 35%, var(--hex-primary-dark) 65%, var(--hex-primary-dark) 100%);
	background-size: 250% 250%;
	border-radius: 16px;
	padding: 26px 28px;
	margin-bottom: 28px;
	box-shadow: 0 10px 30px -12px rgba(var(--hex-primary-rgb), 0.45);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	animation: hexProfileHeroGradientShift 12s ease-in-out infinite;
}

.hex-profile-hero::before {
	content: "";
	position: absolute;
	inset: -30px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cpath d='M110 8 L196 58 L196 158 L110 208 L24 158 L24 58 Z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 4 L107 32 L107 88 L60 116 L13 88 L13 32 Z' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: left -60px top -50px, left 30px bottom -40px;
	opacity: 0.12;
	z-index: 0;
	pointer-events: none;
	animation: hexProfileHeroPatternDrift 16s ease-in-out infinite;
}

.hex-profile-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% -20%, rgba(255, 255, 255, 0.28), transparent 55%);
	pointer-events: none;
	z-index: 0;
	animation: hexProfileHeroGlowPulse 6s ease-in-out infinite;
}

.hex-profile-hero-avatar.hex-avatar,
.hex-profile-hero-avatar.hex-avatar-initial {
	position: relative;
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border: 3px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.35);
	z-index: 1;
	animation: hexProfileHeroAvatarPulse 3.2s ease-out infinite;
}

.hex-profile-hero-text {
	z-index: 1;
}

@keyframes hexProfileHeroGradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes hexProfileHeroPatternDrift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(6px, -8px) rotate(4deg); }
}

@keyframes hexProfileHeroGlowPulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}

@keyframes hexProfileHeroAvatarPulse {
	0% { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.45); }
	70% { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hex-profile-hero,
	.hex-profile-hero::before,
	.hex-profile-hero::after,
	.hex-profile-hero-avatar.hex-avatar,
	.hex-profile-hero-avatar.hex-avatar-initial {
		animation: none;
	}
}

.hex-profile-hero-avatar.hex-avatar-initial {
	font-size: 34px !important;
}

.hex-profile-hero-text {
	position: relative;
	min-width: 0;
}

.hex-profile-hero-name {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	color: var(--hex-text-on-primary) !important;
}

.hex-profile-hero-role {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	padding: 3px 14px;
}

.hex-profile-badge-box {
	display: flex;
	align-items: center;
	gap: 16px;
	background-image:
		linear-gradient(135deg, #f59e0b 0%, #f97316 45%, #ea580c 100%),
		linear-gradient(90deg, #facc15, #ef4444, #ec4899, #a855f7, #7c3aed, #facc15, #ef4444, #ec4899, #a855f7, #7c3aed);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-size: 220% 220%, 400% 100%;
	border: 2px solid transparent;
	border-radius: 16px;
	padding: 18px 22px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 10px 26px -12px rgba(234, 88, 12, 0.5);
	animation: hexProfileBadgeGradientShift 10s ease-in-out infinite;
}

.hex-profile-badge-box::before {
	content: "";
	position: absolute;
	inset: -30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M70 6 L128 32 L128 92 L70 134 L12 92 L12 32 Z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left -40px bottom -50px;
	opacity: 0.14;
	z-index: 0;
	pointer-events: none;
}

.hex-profile-badge-box::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 92% -10%, rgba(255, 255, 255, 0.35), transparent 55%);
	pointer-events: none;
	z-index: 0;
}

.hex-profile-badge-icon-wrap {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	border: 2px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
	animation: hexProfileBadgeIconPulse 3s ease-out infinite;
}

.hex-profile-badge-icon-wrap .hex-icon {
	width: 26px;
	height: 26px;
	stroke-width: 1.8;
}

.hex-profile-badge-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hex-profile-badge-title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	color: #fff;
}

.hex-profile-badge-subtitle {
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

.hex-profile-badge-count {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

@keyframes hexProfileBadgeGradientShift {
	0% { background-position: 0% 50%, 0% 50%; }
	50% { background-position: 100% 50%, 200% 50%; }
	100% { background-position: 0% 50%, 400% 50%; }
}

@keyframes hexProfileBadgeIconPulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
	70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hex-profile-badge-box,
	.hex-profile-badge-icon-wrap {
		animation: none;
	}
}

@media (max-width: 600px) {
	.hex-profile-badge-box {
		padding: 16px 14px 10px;
		gap: 10px;
		margin-bottom: 14px;
		border-radius: 12px;
	}

	.hex-profile-badge-icon-wrap {
		width: 36px;
		height: 36px;
		border-width: 1.5px;
	}

	.hex-profile-badge-icon-wrap .hex-icon {
		width: 18px;
		height: 18px;
	}

	.hex-profile-badge-title {
		font-size: 13px;
	}

	.hex-profile-badge-subtitle {
		font-size: 10px;
	}

	.hex-profile-badge-count {
		position: absolute;
		top: 6px;
		left: 8px;
		z-index: 2;
		margin-inline-start: 0;
		padding: 2px 8px;
		font-size: 10px;
	}
}

.hex-profile-class-box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.hex-profile-class-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--hex-bg-soft);
	border: 1px solid var(--hex-border-light);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-class-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--hex-class-item-accent, var(--hex-primary));
}

.hex-profile-class-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
	border-color: var(--hex-class-item-accent, var(--hex-primary));
}

.hex-profile-class-item--class    { --hex-class-item-accent: var(--hex-primary); --hex-class-item-accent-bg: var(--hex-primary-soft); }
.hex-profile-class-item--grade    { --hex-class-item-accent: var(--hex-color-info); --hex-class-item-accent-bg: var(--hex-color-info-bg); }
.hex-profile-class-item--teacher  { --hex-class-item-accent: var(--hex-color-warning); --hex-class-item-accent-bg: var(--hex-color-warning-bg); }

.hex-profile-class-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--hex-class-item-accent-bg, var(--hex-primary-soft));
	color: var(--hex-class-item-accent, var(--hex-primary));
}

.hex-profile-class-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-profile-class-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hex-profile-class-label {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-profile-class-value {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--hex-text-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-profile-exam-stats-box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.hex-profile-exam-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 18px 16px;
	border-radius: 14px;
	text-align: center;
	border: 1px solid transparent;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-exam-stat--passed {
	background: var(--hex-color-success-bg);
}

.hex-profile-exam-stat--failed {
	background: var(--hex-color-error-bg);
}

.hex-profile-exam-stat:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
}

.hex-profile-exam-stat--passed:hover {
	border-color: var(--hex-color-success);
}

.hex-profile-exam-stat--failed:hover {
	border-color: var(--hex-color-error);
}

.hex-profile-exam-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
}

.hex-profile-exam-stat-icon .hex-icon {
	width: 19px;
	height: 19px;
}

.hex-profile-exam-stat--passed .hex-profile-exam-stat-icon {
	color: var(--hex-color-success);
}

.hex-profile-exam-stat--failed .hex-profile-exam-stat-icon {
	color: var(--hex-color-error);
}

[data-hex-theme="dark"] .hex-profile-exam-stat-icon {
	background: rgba(255, 255, 255, 0.06);
}

.hex-profile-exam-stat-value {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.hex-profile-exam-stat--passed .hex-profile-exam-stat-value {
	color: var(--hex-color-success);
}

.hex-profile-exam-stat--failed .hex-profile-exam-stat-value {
	color: var(--hex-color-error);
}

.hex-profile-exam-stat-label {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

@media (max-width: 600px) {
	.hex-profile-exam-stats-box {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.hex-profile-exam-stat {
		padding: 14px 8px;
	}

	.hex-profile-exam-stat-icon {
		width: 32px;
		height: 32px;
	}

	.hex-profile-exam-stat-value {
		font-size: 20px;
	}

	.hex-profile-exam-stat-label {
		font-size: 11.5px;
	}
}

/* --- باکس «فعالیت‌های شما» در پروفایل معلم (تعداد آزمون‌ها، گزارش‌ها،
   مهارت‌ها و...) --- */

.hex-profile-teacher-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}

.hex-profile-teacher-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 14px;
	background: var(--hex-bg-soft);
	border: 1px solid var(--hex-border-light);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-teacher-stat::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--hex-stat-accent, var(--hex-primary));
}

.hex-profile-teacher-stat:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
	border-color: var(--hex-stat-accent, var(--hex-primary));
}

.hex-profile-teacher-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--hex-stat-accent-bg, var(--hex-primary-soft));
	color: var(--hex-stat-accent, var(--hex-primary));
}

.hex-profile-teacher-stat-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-profile-teacher-stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hex-text-heading);
	font-variant-numeric: tabular-nums;
}

.hex-profile-teacher-stat-label {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

.hex-profile-teacher-stat--primary { --hex-stat-accent: var(--hex-primary); --hex-stat-accent-bg: var(--hex-primary-soft); }
.hex-profile-teacher-stat--info    { --hex-stat-accent: var(--hex-color-info); --hex-stat-accent-bg: var(--hex-color-info-bg); }
.hex-profile-teacher-stat--warning { --hex-stat-accent: var(--hex-color-warning); --hex-stat-accent-bg: var(--hex-color-warning-bg); }
.hex-profile-teacher-stat--error   { --hex-stat-accent: var(--hex-color-error); --hex-stat-accent-bg: var(--hex-color-error-bg); }
.hex-profile-teacher-stat--success { --hex-stat-accent: var(--hex-color-success); --hex-stat-accent-bg: var(--hex-color-success-bg); }

@media (max-width: 600px) {
	.hex-profile-teacher-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.hex-profile-teacher-stat {
		padding: 12px;
	}

	.hex-profile-teacher-stat-value {
		font-size: 19px;
	}

	.hex-profile-teacher-stat-label {
		font-size: 11.5px;
	}
}

/* --- کارت‌های «کلاس‌ها و درس‌های من» در پروفایل معلم (جایگزین مدرن‌تر
   جدول قدیمی: هر کلاس یک کارت با نام/پایه، نشان نقش و چیپ‌های دروس) --- */

.hex-profile-teacher-classes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.hex-profile-teacher-class-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border-radius: 16px;
	background: var(--hex-bg-soft);
	border: 1px solid var(--hex-border-light);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-teacher-class-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
	border-color: var(--hex-primary);
}

.hex-profile-teacher-class-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hex-profile-teacher-class-card-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
}

.hex-profile-teacher-class-card-icon .hex-icon {
	width: 19px;
	height: 19px;
}

.hex-profile-teacher-class-card-titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hex-profile-teacher-class-card-name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--hex-text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hex-profile-teacher-class-card-grade {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-profile-teacher-class-card-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hex-profile-teacher-class-role-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.6;
}

.hex-profile-teacher-class-role-badge .hex-icon {
	width: 13px;
	height: 13px;
}

.hex-profile-teacher-class-role-badge--homeroom {
	background: var(--hex-color-info-bg);
	color: var(--hex-color-info);
}

.hex-profile-teacher-class-role-badge--subject {
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
}

.hex-profile-teacher-class-card-subjects {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 10px;
	border-top: 1px dashed var(--hex-border-light);
}

.hex-profile-teacher-class-subject-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	font-size: 12px;
	color: var(--hex-text-primary);
}

.hex-profile-teacher-class-subject-chip .hex-icon {
	width: 12px;
	height: 12px;
	color: var(--hex-text-secondary);
	flex-shrink: 0;
}

.hex-profile-teacher-class-card-no-subjects {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

@media (max-width: 600px) {
	.hex-profile-teacher-classes-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.hex-profile-teacher-class-card {
		padding: 13px;
	}
}

.hex-profile-attendance-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-profile-attendance-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-profile-attendance-title-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-profile-attendance-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
}

.hex-profile-attendance-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 10px;
	border-radius: 14px;
	text-align: center;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-attendance-stat:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
	border-color: currentColor;
}

.hex-profile-attendance-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
}

.hex-profile-attendance-stat-icon .hex-icon {
	width: 17px;
	height: 17px;
}

[data-hex-theme="dark"] .hex-profile-attendance-stat-icon {
	background: rgba(255, 255, 255, 0.06);
}

.hex-profile-attendance-stat-value {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.hex-profile-attendance-stat-label {
	font-size: 12px;
}

.hex-profile-skills-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-profile-skills-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-profile-skills-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-profile-skills-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.hex-profile-skill-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 15px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
	white-space: nowrap;
	background: var(--hex-primary);
	box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.35);
	transition: transform .15s ease, box-shadow .15s ease;
}

.hex-profile-skill-badge:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -6px rgba(15, 23, 42, 0.4);
}

.hex-profile-skill-badge .hex-icon {
	width: 13px;
	height: 13px;
}

.hex-profile-discipline-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-profile-discipline-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-profile-discipline-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-profile-discipline-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
}

.hex-profile-discipline-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px 10px;
	border-radius: 14px;
	text-align: center;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-discipline-stat:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
}

.hex-profile-discipline-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
}

.hex-profile-discipline-stat-icon .hex-icon {
	width: 17px;
	height: 17px;
}

[data-hex-theme="dark"] .hex-profile-discipline-stat-icon {
	background: rgba(255, 255, 255, 0.06);
}

.hex-profile-discipline-stat-value {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.hex-profile-discipline-stat-label {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-profile-discipline-stat--positive {
	background: var(--hex-color-success-bg);
	border-color: transparent;
}

.hex-profile-discipline-stat--positive:hover {
	border-color: var(--hex-color-success);
}

.hex-profile-discipline-stat--positive .hex-profile-discipline-stat-icon,
.hex-profile-discipline-stat--positive .hex-profile-discipline-stat-value {
	color: var(--hex-color-success);
}

.hex-profile-discipline-stat--negative {
	background: var(--hex-color-error-bg);
	border-color: transparent;
}

.hex-profile-discipline-stat--negative:hover {
	border-color: var(--hex-color-error);
}

.hex-profile-discipline-stat--negative .hex-profile-discipline-stat-icon,
.hex-profile-discipline-stat--negative .hex-profile-discipline-stat-value {
	color: var(--hex-color-error);
}

.hex-profile-discipline-stat--score {
	background: var(--hex-bg-soft);
	border-color: transparent;
}

.hex-profile-discipline-stat--score:hover {
	border-color: var(--hex-primary);
}

.hex-profile-discipline-stat--score .hex-profile-discipline-stat-icon,
.hex-profile-discipline-stat--score .hex-profile-discipline-stat-value {
	color: var(--hex-primary);
}

.hex-profile-quran-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-profile-quran-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-profile-quran-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-profile-quran-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}

.hex-profile-quran-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--hex-bg-soft);
	border: 1px solid var(--hex-border-light);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-quran-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 18px -12px rgba(15, 23, 42, 0.25);
	border-color: var(--hex-primary);
}

.hex-profile-quran-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
	flex-shrink: 0;
}

.hex-profile-quran-item-icon .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-profile-quran-item-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--hex-text-primary);
	white-space: nowrap;
}

.hex-profile-quran-item-value {
	font-size: 13px;
	color: var(--hex-text-secondary);
}

.hex-profile-activity-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-profile-activity-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-profile-activity-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-profile-activity-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hex-profile-activity-stat {
	flex: 1 1 200px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--hex-border-light);
	background: var(--hex-bg-soft);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-activity-stat:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.25);
	border-color: var(--hex-primary-light);
}

.hex-profile-activity-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 10px;
}

.hex-profile-activity-stat-icon .hex-icon {
	width: 19px;
	height: 19px;
}

.hex-profile-activity-stat--login .hex-profile-activity-stat-icon {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

.hex-profile-activity-stat--total .hex-profile-activity-stat-icon {
	background: var(--hex-color-info-bg);
	color: var(--hex-color-info);
}

.hex-profile-activity-stat-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hex-profile-activity-stat-value {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hex-text-heading);
}

[data-hex-theme="dark"] .hex-profile-activity-stat--login .hex-profile-activity-stat-value {
	color: var(--hex-color-success-light);
}

.hex-profile-activity-stat-date {
	font-size: 12px;
	font-weight: 600;
	color: var(--hex-text-secondary);
}

.hex-profile-activity-stat-label {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-profile-attendance-stat--present {
	background: var(--hex-color-success-bg);
	color: var(--hex-color-success);
}

.hex-profile-attendance-stat--present .hex-profile-attendance-stat-icon {
	color: var(--hex-color-success);
}

.hex-profile-attendance-stat--absent {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-profile-attendance-stat--absent .hex-profile-attendance-stat-icon {
	color: var(--hex-color-error);
}

.hex-profile-attendance-stat--late {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning-text);
}

.hex-profile-attendance-stat--late .hex-profile-attendance-stat-icon {
	color: var(--hex-color-warning-text);
}

.hex-profile-attendance-stat--excused {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

.hex-profile-attendance-stat--excused .hex-profile-attendance-stat-icon {
	color: var(--hex-primary-dark);
}

.hex-profile-summary-box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.hex-profile-summary-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	background: var(--hex-bg-soft);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	padding: 15px 16px;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hex-profile-summary-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--hex-summary-accent, var(--hex-primary));
}

.hex-profile-summary-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.28);
	border-color: var(--hex-summary-accent, var(--hex-primary));
}

.hex-profile-summary-item--primary  { --hex-summary-accent: var(--hex-primary); --hex-summary-accent-bg: var(--hex-primary-soft); }
.hex-profile-summary-item--success  { --hex-summary-accent: var(--hex-color-success); --hex-summary-accent-bg: var(--hex-color-success-bg); }
.hex-profile-summary-item--warning  { --hex-summary-accent: var(--hex-color-warning); --hex-summary-accent-bg: var(--hex-color-warning-bg); }
.hex-profile-summary-item--error    { --hex-summary-accent: var(--hex-color-error); --hex-summary-accent-bg: var(--hex-color-error-bg); }
.hex-profile-summary-item--muted    { --hex-summary-accent: var(--hex-text-muted); --hex-summary-accent-bg: var(--hex-bg-page); }

.hex-profile-summary-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--hex-summary-accent-bg, var(--hex-primary-soft));
	color: var(--hex-summary-accent, var(--hex-primary));
}

.hex-profile-summary-icon .hex-icon {
	width: 19px;
	height: 19px;
}

.hex-profile-summary-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hex-profile-summary-label {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-profile-summary-value {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--hex-text-heading);
	font-variant-numeric: tabular-nums;
}

.hex-photo-upload-field {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

.hex-photo-upload-field label {
	flex-basis: auto;
}

.hex-photo-upload-preview {
	width: 64px;
	height: 64px;
}

.hex-photo-upload-control {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	max-width: 320px;
}

.hex-photo-upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hex-photo-upload-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 !important;
	padding: 10px 16px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 999px;
	background: var(--hex-bg-page);
	color: var(--hex-primary-dark) !important;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hex-photo-upload-btn:hover {
	background: var(--hex-primary-soft-hover);
	border-color: var(--hex-primary-light);
}

.hex-photo-upload-filename {
	display: none;
	font-size: 12.5px;
	color: var(--hex-text-secondary);
	word-break: break-all;
}

.hex-photo-upload-filename.is-visible {
	display: inline-block;
}

[data-hex-theme="dark"] .hex-photo-upload-btn {
	background: var(--hex-bg-soft);
	border-color: var(--hex-border-strong);
	color: #ffffff !important;
}

[data-hex-theme="dark"] .hex-photo-upload-btn:hover {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-school-logout-form {
	margin: 0;
}

.hex-school-btn-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--hex-primary-light);
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
}

.hex-school-btn-link:hover {
	color: var(--hex-primary);
}

/* ================= داشبورد پیشرفته (آمار کلی و دکمه‌های میانبر) ================= */

/* --- کارت خوشامدگویی (Hero) --- */

.hex-dashboard-hero {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	/* رنگ پس‌زمینه از توکن‌های رنگ برند (--hex-primary/--hex-primary-dark) گرفته
	   می‌شود تا با تغییر پالت (روشن/آبی/تیره) هماهنگ بماند و همیشه سبز نباشد. */
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-dark) 100%);
	border-radius: 16px;
	padding: 26px 28px 40px;
	margin: 0 0 46px;
	overflow: hidden;
	/* سایه‌ی خنثی (نه رنگی) تا با هر پالتی همخوانی داشته باشد. */
	box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.4);
}

.hex-dashboard-hero::before,
.hex-dashboard-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.hex-dashboard-hero::before {
	width: 220px;
	height: 220px;
	top: -110px;
	inset-inline-end: -60px;
}

.hex-dashboard-hero::after {
	width: 140px;
	height: 140px;
	bottom: -80px;
	inset-inline-start: 10%;
	background: rgba(255, 255, 255, 0.06);
}

.hex-dashboard-hero-main {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 18px;
}

.hex-dashboard-hero-avatar {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--hex-text-on-primary);
	font-size: 22px;
	font-weight: bold;
	backdrop-filter: blur(4px);
}

.hex-dashboard-hero-text {
	min-width: 0;
}

.hex-dashboard-hero-greeting {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 3px 12px 3px 10px;
	margin-bottom: 8px;
}

.hex-dashboard-hero-greeting-icon {
	display: inline-flex;
	color: #ffe9a8;
}

.hex-dashboard-hero-greeting-icon .hex-icon {
	display: block;
	width: 13px;
	height: 13px;
}

.hex-dashboard-hero .hex-dashboard-hero-title {
	color: var(--hex-text-on-primary);
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.5;
	font-weight: 600;
}

.hex-dashboard-hero-name {
	font-weight: 800;
}

/* بج جدید «نقش کاربر» (دانش‌آموز/معلم/مدیر/والد): قبلاً به‌صورت پرانتزی
   جلوی نام کاربر می‌آمد (نک. render_dashboard_view، ساخت $dash_name)؛ حالا
   کاملاً مستقل شده و مثل بج «شب/صبح بخیر...» (نک. .hex-dashboard-hero-greeting)
   به شکل یک پیل مجزا نمایش داده می‌شود، اما در سمت چپ باکس (روبروی بج
   خوشامدگویی که سمت راست/کنار آواتار است) - با موقعیت absolute نسبت به
   خودِ .hex-dashboard-hero. از px فیزیکی (left) به‌جای منطقی استفاده شده
   چون باید همیشه سمت چپِ ظاهریِ صفحه بماند، صرف‌نظر از جهت متن. */
.hex-dashboard-hero-role-badge {
	position: absolute;
	z-index: 1;
	top: 26px;
	left: 28px;
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	padding: 4px 14px;
}

.hex-dashboard-hero .hex-dashboard-intro {
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	font-size: 13.5px;
}

/* --- باکس شناور تاریخ/ساعت --- */

.hex-dashboard-date-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	padding: 14px 20px;
	margin: 14px 0 20px;
}

.hex-dashboard-date-box--floating {
	position: relative;
	margin-top: -30px;
	box-shadow: 0 12px 24px -14px rgba(15, 23, 42, 0.18);
}

.hex-dashboard-date-info,
.hex-dashboard-clock {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.hex-dashboard-clock {
	position: relative;
	padding-inline-start: 16px;
}

.hex-dashboard-clock::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--hex-border);
}

.hex-dashboard-clock-value {
	font-size: 16px;
	font-weight: 700;
	/* به‌جای رنگ سبز ثابت، به رنگ برند پالت جاری وصل می‌شود. */
	color: var(--hex-primary-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

[data-hex-theme="dark"] .hex-dashboard-clock-value {
	color: var(--hex-primary-light);
}

.hex-dashboard-date-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
}

.hex-dashboard-clock[data-hex-live-clock] .hex-dashboard-date-icon {
	background: #fef3e2;
	color: #d97a1f;
}

.hex-dashboard-date-icon .hex-icon {
	display: block;
}

.hex-dashboard-date-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hex-dashboard-date-label {
	font-size: 11.5px;
	color: var(--hex-text-muted);
	font-weight: 600;
}

.hex-dashboard-date-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

@media ( max-width: 600px ) {
	.hex-dashboard-hero {
		padding: 22px 18px 34px;
	}

	.hex-dashboard-hero-main {
		gap: 14px;
	}

	.hex-dashboard-hero-avatar {
		width: 48px;
		height: 48px;
		font-size: 18px;
	}

	.hex-dashboard-hero-title {
		font-size: 15px;
		line-height: 1.6;
	}

	/* متن راهنمای «از منوی کناری بخش مورد نظر...» روی موبایل حذف می‌شود؛
	   چون در صفحه‌ی باریک هم فضای زیادی می‌گیرد و هم عملاً غیرضروری است
	   (منوی کناری در موبایل جای دیگری/پنهان است، پس این راهنما گمراه‌کننده
	   هم می‌شود). فقط در دسکتاپ/تبلت (بالاتر از این breakpoint) نمایش داده
	   می‌شود. */
	.hex-dashboard-hero .hex-dashboard-intro {
		display: none;
	}

	/* روی موبایل، فضای کمتری در دسترس است؛ بج نقش کاربر (نک.
	   .hex-dashboard-hero-role-badge بالاتر در همین فایل) کمی جمع‌وجورتر
	   و نزدیک‌تر به لبه‌ی چپ می‌شود تا با پدینگ کوچک‌تر باکس در حالت موبایل
	   (نک. .hex-dashboard-hero بالاتر در همین بلوک) هم‌خوانی داشته باشد. */
	.hex-dashboard-hero-role-badge {
		top: 18px;
		left: 16px;
		font-size: 11px;
		padding: 3px 11px;
	}

	.hex-dashboard-date-box--floating {
		margin-top: -22px;
	}

	/* روی موبایل، «امروز» و «ساعت» باید همیشه در یک ردیف کنار هم بمانند و
	   هرگز زیر هم نیفتند (نک. flex-wrap: wrap در حالت پیش‌فرض که روی
	   صفحه‌ی باریک باعث می‌شد این دو بخش به خط بعد بشکنند). برای همین
	   flex-wrap مستقیماً خاموش و فاصله‌ها/آیکن‌ها/فونت‌ها کوچک‌تر شدند تا
	   هر دو با هم در عرض صفحه جا شوند؛ اگر متن تاریخ/ساعت هم از عرض
	   موجودش بیشتر شود، به‌جای شکستن به خط بعد یا شل‌شدن چیدمان، با
	   سه‌نقطه (ellipsis) کوتاه می‌شود. */
	.hex-dashboard-date-box {
		flex-wrap: nowrap;
		gap: 8px;
		padding: 10px 12px;
	}

	.hex-dashboard-date-info,
	.hex-dashboard-clock {
		flex: 1 1 0;
		min-width: 0;
		gap: 8px;
	}

	.hex-dashboard-clock {
		padding-inline-start: 10px;
	}

	.hex-dashboard-date-icon {
		width: 30px;
		height: 30px;
		border-radius: 10px;
	}

	.hex-dashboard-date-icon .hex-icon {
		width: 16px;
		height: 16px;
	}

	.hex-dashboard-date-text {
		min-width: 0;
	}

	.hex-dashboard-date-label {
		font-size: 10px;
	}

	.hex-dashboard-date-value,
	.hex-dashboard-clock-value {
		display: block;
		font-size: 12.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.hex-dashboard-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin: 20px 0 26px;
}

.hex-dashboard-stat-card {
	background: var(--hex-primary-soft);
	border: 1px solid var(--hex-primary-soft-hover);
	border-radius: 8px;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.hex-dashboard-stat-number {
	font-size: 26px;
	font-weight: bold;
	color: var(--hex-primary);
	line-height: 1;
}

.hex-dashboard-stat-label {
	font-size: 13px;
	color: var(--hex-text-secondary);
}

/* کارت‌های آمار کلی داشبورد مدیر (دانش‌آموزان، معلم‌ها، کلاس‌ها، والدین) با
 * آیکن و رنگ متفاوت برای هر کارت؛ فقط همین بخش را تحت تأثیر قرار می‌دهد و
 * کارت‌های آماری بخش «کارنامه دانش‌آموز» (رتبه/آخرین نمره) دست‌نخورده می‌مانند. */
.hex-dashboard-stats--overview {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.hex-dashboard-stats--overview .hex-dashboard-stat-card {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	border-radius: 12px;
	padding: 16px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hex-dashboard-stats--overview .hex-dashboard-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.hex-dashboard-stats--overview .hex-dashboard-stat-number {
	font-size: 24px;
	font-weight: 800;
}

.hex-dashboard-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.hex-dashboard-stat-icon .hex-icon {
	width: 20px;
	height: 20px;
	display: block;
}

.hex-dashboard-stat-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hex-dashboard-stats--overview .hex-dashboard-stat-label {
	color: rgba(255, 255, 255, 0.85);
}

.hex-dashboard-stat-card--students {
	background: #0d9488;
	border-color: #0d9488;
}

.hex-dashboard-stat-card--students .hex-dashboard-stat-icon {
	background: rgba(255, 255, 255, 0.2);
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card--students .hex-dashboard-stat-number {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card--teachers {
	background: var(--hex-color-info);
	border-color: var(--hex-color-info);
}

.hex-dashboard-stat-card--teachers .hex-dashboard-stat-icon {
	background: rgba(255, 255, 255, 0.2);
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card--teachers .hex-dashboard-stat-number {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card--classes {
	background: #ea580c;
	border-color: #ea580c;
}

.hex-dashboard-stat-card--classes .hex-dashboard-stat-icon {
	background: rgba(255, 255, 255, 0.2);
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card--classes .hex-dashboard-stat-number {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card--parents {
	background: #059669;
	border-color: #059669;
}

.hex-dashboard-stat-card--parents .hex-dashboard-stat-icon {
	background: rgba(255, 255, 255, 0.2);
	color: var(--hex-text-on-primary);
}

.hex-dashboard-stat-card--parents .hex-dashboard-stat-number {
	color: var(--hex-text-on-primary);
}

.hex-dashboard-student-summary {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hex-border);
}

.hex-dashboard-student-summary-name {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--hex-primary);
}

/* کارت‌های «رتبه در کلاس» و «آخرین نمره ثبت‌شده» در خلاصه‌ی داشبورد
   دانش‌آموز/والد (نک. render_dashboard_student_summary) - طرحی مدرن‌تر و
   متمایزتر از کارت‌های آماری ساده‌ی پیش‌فرض (.hex-dashboard-stat-card):
   چیدمان افقی با آیکن دایره‌ای گرادیانی، پس‌زمینه‌ی گرادیانی ملایم و
   رنگ اختصاصی هر کارت (طلایی/کهربایی برای رتبه چون نماد جایزه است، فیروزه‌ای
   برای نمره)، به‌همراه حالت هاور با سایه‌ی نرم. کاملاً مستقل از سایر
   استفاده‌های .hex-dashboard-stat-card (کارت‌های شهریه/آمار کلی داشبورد
   مدیر) عمل می‌کند چون فقط زیرمجموعه‌ی .hex-dashboard-stats--student-summary
   را هدف می‌گیرد. */
.hex-dashboard-stats--student-summary {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin: 16px 0 20px;
}

.hex-dashboard-stats--student-summary .hex-dashboard-stat-card {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	border-radius: 16px;
	padding: 16px 18px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hex-dashboard-stats--student-summary .hex-dashboard-stat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.hex-dashboard-stats--student-summary .hex-dashboard-stat-icon {
	width: 46px;
	height: 46px;
	border-radius: 13px;
}

.hex-dashboard-stats--student-summary .hex-dashboard-stat-icon .hex-icon {
	width: 22px;
	height: 22px;
}

.hex-dashboard-stats--student-summary .hex-dashboard-stat-body {
	gap: 4px;
}

.hex-dashboard-stats--student-summary .hex-dashboard-stat-number {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
}

.hex-dashboard-stats--student-summary .hex-dashboard-stat-label {
	font-size: 12.5px;
}

.hex-dashboard-stat-card--rank {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border-color: #fde68a;
}

.hex-dashboard-stat-card--rank .hex-dashboard-stat-icon {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #ffffff;
}

.hex-dashboard-stat-card--rank .hex-dashboard-stat-number {
	color: #92400e;
}

.hex-dashboard-stat-card--rank .hex-dashboard-stat-label {
	color: #b45309;
}

.hex-dashboard-stat-card--grade {
	background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
	border-color: #a5f3fc;
}

.hex-dashboard-stat-card--grade .hex-dashboard-stat-icon {
	background: linear-gradient(135deg, #06b6d4, #0891b2);
	color: #ffffff;
}

.hex-dashboard-stat-card--grade .hex-dashboard-stat-number {
	color: #155e75;
}

.hex-dashboard-stat-card--grade .hex-dashboard-stat-label {
	color: #0e7490;
}

/* هماهنگی این دو کارت با پالت تیره: پس‌زمینه‌ی گرادیانی به نسخه‌ی نیمه‌شفاف
   و کم‌رنگ‌تر تبدیل می‌شود (به‌جای پاستل روشن که روی زمینه‌ی تیره ناخوانا
   می‌شود)، border هم‌رنگ خودِ کارت با opacity کم، و رنگ عدد/برچسب به نسخه‌ی
   روشن‌تر همان طیف رنگی تغییر می‌کند تا کنتراست کافی حفظ شود؛ آیکن دایره‌ای
   گرادیانی دست‌نخورده می‌ماند چون خودش به‌اندازه‌ی کافی روی هر دو پالت خوانا
   است. */
[data-hex-theme="dark"] .hex-dashboard-stat-card--rank {
	background: linear-gradient(135deg, rgba(217, 119, 6, 0.16) 0%, rgba(180, 83, 9, 0.12) 100%);
	border-color: rgba(251, 191, 36, 0.3);
}

[data-hex-theme="dark"] .hex-dashboard-stat-card--rank .hex-dashboard-stat-number {
	color: #fbbf24;
}

[data-hex-theme="dark"] .hex-dashboard-stat-card--rank .hex-dashboard-stat-label {
	color: #fcd34d;
}

[data-hex-theme="dark"] .hex-dashboard-stat-card--grade {
	background: linear-gradient(135deg, rgba(8, 145, 178, 0.16) 0%, rgba(14, 116, 144, 0.12) 100%);
	border-color: rgba(34, 211, 238, 0.3);
}

[data-hex-theme="dark"] .hex-dashboard-stat-card--grade .hex-dashboard-stat-number {
	color: #22d3ee;
}

[data-hex-theme="dark"] .hex-dashboard-stat-card--grade .hex-dashboard-stat-label {
	color: #67e8f9;
}

.hex-dashboard-attendance-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.hex-dashboard-attendance-pill {
	font-size: 12px;
	padding: 4px 12px;
}

.hex-dashboard-charts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	margin: 4px 0 26px;
}

.hex-dashboard-chart-card {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 8px;
	padding: 16px;
}

.hex-dashboard-chart-canvas-wrap {
	position: relative;
	height: 240px;
	margin-top: 6px;
}

.hex-dashboard-chart-canvas {
	width: 100% !important;
	height: 100% !important;
}

.hex-dashboard-shortcuts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
	margin-top: 6px;
}

.hex-dashboard-shortcut-btn,
.hex-dashboard-shortcut-btn:link,
.hex-dashboard-shortcut-btn:visited,
.hex-dashboard-shortcut-btn:hover,
.hex-dashboard-shortcut-btn:focus,
.hex-dashboard-shortcut-btn:active {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	aspect-ratio: 1 / 1;
	padding: 12px 8px;
	background: rgba(240, 240, 240, 0.55);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	color: #4338ca;
	text-decoration: none !important;
	border-radius: 15px;
	border: 1.5px solid #4338ca;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* هر دکمه‌ی میانبر یک ته‌رنگ گرادیانیِ کم‌رنگ و نیمه‌شفاف مخصوص به خودش
   می‌گیرد (به ترتیب ظاهر شدن در گرید، چرخشی هر ۸ آیتم) که روی زمینه‌ی
   شیشه‌ای پایه (blur شده، نک. .hex-dashboard-shortcut-btn) می‌نشیند - دقیقاً
   همان سبک «liquid glass» نوار ناوبری شناور پایین موبایل
   (نک. .hex-school-bottom-nav): پس‌زمینه‌ی نیمه‌شفاف + backdrop-filter
   blur/saturate. حاشیه‌ی دور هر دکمه هم‌رنگ متن/آیکن همان دکمه است (نه
   سفید)، تا هر آیتم هویت رنگی خودش را داشته باشد؛ بدون هیچ سایه‌ای، صرفاً
   با ته‌رنگ و حاشیه‌ی رنگی. */
.hex-dashboard-shortcut-btn:nth-child(8n+1) {
	background: linear-gradient(135deg, rgba(238, 242, 255, 0.4), rgba(219, 234, 254, 0.4));
	color: #1e40af;
	border-color: #1e40af;
}

.hex-dashboard-shortcut-btn:nth-child(8n+2) {
	background: linear-gradient(135deg, rgba(243, 232, 255, 0.4), rgba(233, 213, 255, 0.4));
	color: #7e22ce;
	border-color: #7e22ce;
}

.hex-dashboard-shortcut-btn:nth-child(8n+3) {
	background: linear-gradient(135deg, rgba(252, 231, 243, 0.4), rgba(251, 207, 232, 0.4));
	color: #be185d;
	border-color: #be185d;
}

.hex-dashboard-shortcut-btn:nth-child(8n+4) {
	background: linear-gradient(135deg, rgba(255, 247, 237, 0.4), rgba(254, 215, 170, 0.4));
	color: #c2410c;
	border-color: #c2410c;
}

.hex-dashboard-shortcut-btn:nth-child(8n+5) {
	background: linear-gradient(135deg, rgba(236, 253, 245, 0.4), rgba(187, 247, 208, 0.4));
	color: #15803d;
	border-color: #15803d;
}

.hex-dashboard-shortcut-btn:nth-child(8n+6) {
	background: linear-gradient(135deg, rgba(236, 254, 255, 0.4), rgba(165, 243, 252, 0.4));
	color: #0e7490;
	border-color: #0e7490;
}

.hex-dashboard-shortcut-btn:nth-child(8n+7) {
	background: linear-gradient(135deg, rgba(254, 252, 232, 0.4), rgba(254, 240, 138, 0.4));
	color: #a16207;
	border-color: #a16207;
}

.hex-dashboard-shortcut-btn:nth-child(8n+8) {
	background: linear-gradient(135deg, rgba(255, 241, 242, 0.4), rgba(254, 205, 211, 0.4));
	color: #be123c;
	border-color: #be123c;
}

.hex-dashboard-shortcut-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.hex-dashboard-shortcut-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-dashboard-shortcut-label {
	line-height: 1.3;
}

.hex-dashboard-shortcut-btn:hover,
.hex-dashboard-shortcut-btn:focus {
	transform: translateY(-2px);
}

/* هماهنگ‌سازی دکمه‌های میانبر با پالت تیره: همان منطق شیشه‌ای نوار
   ناوبری پایین موبایل در پالت تیره (نک. [data-hex-theme="dark"]
   .hex-school-bottom-nav بالاتر در همین فایل) این‌جا هم تکرار شده - پایه‌ی
   شیشه‌ای تیره‌تر (رنگ خاکستری-آبی تیره‌ی نیمه‌شفاف)، بدون سایه. ته‌رنگ‌های
   چرخشی هر آیتم هم با نسخه‌ی تیره‌تر و opacity کمی بالاتر جایگزین شدند تا
   روی زمینه‌ی تیره گم نشوند؛ حاشیه و رنگ متن/آیکن هر آیتم هم روشن‌تر شد
   (هم‌رنگ متن، نه سفید) تا کنتراست کافی روی پس‌زمینه‌ی تیره حفظ شود. */
[data-hex-theme="dark"] .hex-dashboard-shortcut-btn,
[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:link,
[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:visited,
[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:hover,
[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:focus,
[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:active {
	background: rgba(30, 41, 59, 0.55);
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+1) {
	background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(59, 130, 246, 0.18));
	color: #93c5fd;
	border-color: #93c5fd;
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+2) {
	background: linear-gradient(135deg, rgba(192, 132, 252, 0.18), rgba(168, 85, 247, 0.18));
	color: #d8b4fe;
	border-color: #d8b4fe;
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+3) {
	background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(236, 72, 153, 0.18));
	color: #f9a8d4;
	border-color: #f9a8d4;
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+4) {
	background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(249, 115, 22, 0.18));
	color: #fdba74;
	border-color: #fdba74;
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+5) {
	background: linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(34, 197, 94, 0.18));
	color: #86efac;
	border-color: #86efac;
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+6) {
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(6, 182, 212, 0.18));
	color: #67e8f9;
	border-color: #67e8f9;
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+7) {
	background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(234, 179, 8, 0.18));
	color: #fde047;
	border-color: #fde047;
}

[data-hex-theme="dark"] .hex-dashboard-shortcut-btn:nth-child(8n+8) {
	background: linear-gradient(135deg, rgba(251, 113, 133, 0.18), rgba(244, 63, 94, 0.18));
	color: #fda4af;
	border-color: #fda4af;
}

.hex-dashboard-top-lists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 4px 0 26px;
}

.hex-dashboard-top-list {
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 8px;
	padding: 16px;
}

.hex-dashboard-top-list-title {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--hex-primary);
}

.hex-dashboard-top-list-items {
	list-style: decimal;
	margin: 0;
	padding-inline-start: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hex-dashboard-top-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: var(--hex-btn-secondary-text);
}

.hex-dashboard-top-list-name {
	font-weight: 600;
}

.hex-dashboard-top-list-count {
	flex-shrink: 0;
	background: var(--hex-primary-soft-hover);
	color: var(--hex-primary);
	font-size: 12px;
	padding: 2px 10px;
	border-radius: 999px;
}

/* ===== نسخه‌ی مدرن‌شده‌ی کارت‌های «فعال‌ترین‌ها» (معلم/دانش‌آموز/کلاس) در
 * داشبورد مدیر مدرسه؛ فقط کارت‌هایی با کلاس «--modern» را تحت تأثیر قرار
 * می‌دهد تا سایر بخش‌های مشابه (مثل داشبورد معلم) دست‌نخورده بمانند. */
.hex-dashboard-top-lists--modern {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list {
	position: relative;
	background: var(--hex-bg-card);
	border: 1px solid #eef1f5;
	border-radius: 16px;
	padding: 18px 18px 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--hex-color-info), var(--hex-color-info-light));
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list--students::before {
	background: linear-gradient(90deg, #0d9488, #2dd4bf);
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list--classes::before {
	background: linear-gradient(90deg, #ea580c, #fb923c);
}

.hex-dashboard-top-list-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 14px;
}

.hex-dashboard-top-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(124, 93, 237, 0.12);
	color: var(--hex-color-info);
}

.hex-dashboard-top-list--students .hex-dashboard-top-list-icon {
	background: rgba(13, 148, 136, 0.12);
	color: #0d9488;
}

.hex-dashboard-top-list--classes .hex-dashboard-top-list-icon {
	background: rgba(234, 88, 12, 0.12);
	color: #ea580c;
}

.hex-dashboard-top-list-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list-items {
	list-style: none;
	padding: 0;
	gap: 6px;
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list-item {
	justify-content: flex-start;
	padding: 8px 8px;
	border-radius: 10px;
	transition: background-color 0.15s ease;
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list-item:hover {
	background-color: var(--hex-bg-page);
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list-item + .hex-dashboard-top-list-item {
	border-top: 1px solid var(--hex-border-light);
}

.hex-dashboard-top-list-rank {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	background: var(--hex-border);
	color: var(--hex-text-secondary);
}

.hex-dashboard-top-list-item.hex-rank-1 .hex-dashboard-top-list-rank {
	background: linear-gradient(135deg, var(--hex-color-warning-light), var(--hex-color-warning));
	color: var(--hex-text-on-primary);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.hex-dashboard-top-list-item.hex-rank-2 .hex-dashboard-top-list-rank {
	background: linear-gradient(135deg, #cbd5e1, #94a3b8);
	color: var(--hex-text-on-primary);
	box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.hex-dashboard-top-list-item.hex-rank-3 .hex-dashboard-top-list-rank {
	background: linear-gradient(135deg, #d97706, var(--hex-color-warning-text));
	color: var(--hex-text-on-primary);
	box-shadow: 0 0 0 3px rgba(146, 64, 14, 0.16);
}

.hex-dashboard-top-list-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	background: rgba(124, 93, 237, 0.12);
	color: var(--hex-color-info);
}

.hex-dashboard-top-list--students .hex-dashboard-top-list-avatar {
	background: rgba(13, 148, 136, 0.12);
	color: #0d9488;
}

.hex-dashboard-top-list--classes .hex-dashboard-top-list-avatar {
	background: rgba(234, 88, 12, 0.12);
	color: #ea580c;
}

.hex-dashboard-top-list--classes .hex-dashboard-top-list-avatar .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-dashboard-top-lists--modern .hex-dashboard-top-list-name {
	font-weight: 600;
	font-size: 13px;
	color: var(--hex-btn-secondary-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-dashboard-teacher-summary {
	margin: 4px 0 26px;
}

.hex-dashboard-most-active-class {
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(135deg, var(--hex-primary-soft) 0%, var(--hex-bg-card) 100%);
	border: 1px solid var(--hex-border-light);
	border-inline-start: 3px solid var(--hex-primary);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 16px;
	box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.18);
}

.hex-dashboard-most-active-class-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--hex-gradient-primary);
	color: #ffffff;
	box-shadow: 0 4px 10px -4px rgba(26, 188, 156, 0.55);
}

.hex-dashboard-most-active-class-icon .hex-icon {
	width: 20px;
	height: 20px;
}

.hex-dashboard-most-active-class-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hex-dashboard-most-active-class-label {
	font-size: 12.5px;
	color: var(--hex-text-muted);
}

.hex-dashboard-most-active-class-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-dashboard-exam-reminders {
	background: var(--hex-color-warning-bg);
	border: 1px solid var(--hex-color-warning-light);
	border-radius: 8px;
	padding: 16px;
	margin-top: 4px;
}

.hex-dashboard-exam-reminders .hex-dashboard-top-list-title {
	color: var(--hex-color-warning-text);
}

.hex-dashboard-exam-reminder-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hex-dashboard-exam-reminder-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--hex-color-warning-text);
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-color-warning-light);
	border-radius: 6px;
	padding: 8px 12px;
}

.hex-dashboard-exam-reminder-subject {
	font-weight: 600;
}

.hex-dashboard-exam-reminder-class {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning-text);
	font-size: 12px;
	padding: 2px 10px;
	border-radius: 999px;
}

.hex-dashboard-exam-reminder-date {
	margin-inline-start: auto;
	font-size: 12px;
	color: var(--hex-color-warning-text);
}

@media (max-width: 782px) {
	.hex-dashboard-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.hex-dashboard-shortcuts {
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
		gap: 10px;
	}

	.hex-dashboard-shortcut-btn {
		font-size: 12px;
		padding: 10px 6px;
	}

	.hex-dashboard-shortcut-icon .hex-icon {
		width: 22px;
		height: 22px;
	}

	.hex-dashboard-top-lists {
		grid-template-columns: 1fr;
	}

	.hex-dashboard-charts {
		grid-template-columns: 1fr;
	}

	.hex-dashboard-chart-canvas-wrap {
		height: 200px;
	}

	.hex-dashboard-exam-reminder-date {
		margin-inline-start: 0;
	}
}

/* ================= معرفی مدرسه (موسس، کادر، درباره مدرسه، گالری) ================= */

.hex-about-modern {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hex-about-hero {
	display: flex;
	align-items: center;
	gap: 18px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 55%, var(--hex-primary-dark) 100%);
	border-radius: 16px;
	padding: 28px 26px;
	margin-bottom: 28px;
	color: var(--hex-text-on-primary);
	box-shadow: 0 10px 30px -12px rgba(13, 148, 136, 0.45);
	position: relative;
	overflow: hidden;
}

.hex-about-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% -20%, rgba(255, 255, 255, 0.25), transparent 55%);
	pointer-events: none;
}

.hex-about-hero-icon {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 14px;
	backdrop-filter: blur(2px);
}

.hex-about-hero-icon .hex-icon {
	width: 30px;
	height: 30px;
}

.hex-about-hero-text {
	position: relative;
	min-width: 0;
}

.hex-about-hero-text .hex-about-hero-title {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
	color: var(--hex-text-on-primary) !important;
}

.hex-about-hero-subtitle {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
}

.hex-about-section {
	margin-bottom: 30px;
	animation: hex-about-fade-in 0.35s ease both;
}

.hex-about-section h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--hex-primary-dark);
	border-bottom: 1px solid var(--hex-border);
	padding-bottom: 10px;
	margin-bottom: 18px;
	font-size: 16px;
}

[data-hex-theme="dark"] .hex-about-text-section h3,
[data-hex-theme="dark"] .hex-about-founder-section h3 {
	color: #ffffff;
}

.hex-about-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hex-primary-soft), var(--hex-primary-soft-hover));
	color: var(--hex-primary-dark);
	flex: 0 0 auto;
}

[data-hex-theme="dark"] .hex-about-section-icon {
	color: var(--hex-primary-light);
}

.hex-about-section-icon .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-about-text-card {
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-inline-start: 3px solid var(--hex-primary-light);
	border-radius: 12px;
	padding: 20px;
}

.hex-about-text-layout {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 20px;
	align-items: start;
}

.hex-about-text-layout.hex-about-text-layout--no-image {
	grid-template-columns: 1fr;
}

.hex-about-text-image {
	display: block;
	width: 100%;
	margin-inline: auto;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.2);
}

.hex-about-text-section p {
	line-height: 2;
	color: var(--hex-text-primary);
	margin: 0;
}

.hex-about-people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.hex-about-person-card {
	display: flex;
	gap: 16px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hex-about-person-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px rgba(13, 148, 136, 0.3);
}

.hex-about-founder-card {
	max-width: 520px;
}

.hex-about-person-photo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--hex-border);
	border: 3px solid var(--hex-primary-soft-hover);
}

.hex-about-person-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hex-primary-dark);
	background: linear-gradient(135deg, var(--hex-primary-soft), var(--hex-primary-soft-hover));
}

[data-hex-theme="dark"] .hex-about-person-photo-placeholder {
	color: var(--hex-primary-light);
}

.hex-about-person-photo-placeholder .hex-icon {
	width: 30px;
	height: 30px;
}

.hex-about-person-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	justify-content: center;
}

.hex-about-person-name {
	color: var(--hex-primary-dark);
	font-size: 16px;
}

[data-hex-theme="dark"] .hex-about-person-name {
	color: #ffffff;
}

.hex-about-person-role {
	display: inline-flex;
	width: fit-content;
	color: var(--hex-primary-dark);
	background: var(--hex-primary-soft);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
}

[data-hex-theme="dark"] .hex-about-person-role {
	color: var(--hex-primary-light);
}

.hex-about-person-bio {
	color: #6b7280;
	font-size: 13px;
	margin: 4px 0 0;
	line-height: 1.8;
}

.hex-about-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

.hex-about-gallery-item {
	margin: 0;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hex-about-gallery-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.25);
}

.hex-about-gallery-frame {
	display: block;
	overflow: hidden;
}

.hex-about-gallery-item img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.hex-about-gallery-item:hover img {
	transform: scale(1.06);
}

.hex-about-gallery-item figcaption {
	padding: 9px 10px;
	font-size: 12px;
	color: var(--hex-text-secondary);
	text-align: center;
	background: var(--hex-bg-card);
}

.hex-about-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	padding: 50px 20px;
	background: var(--hex-bg-page);
	border: 1px dashed var(--hex-border-strong);
	border-radius: 14px;
	color: var(--hex-text-secondary);
}

.hex-about-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

[data-hex-theme="dark"] .hex-about-empty-icon {
	color: var(--hex-primary-light);
}

.hex-about-empty-icon .hex-icon {
	width: 26px;
	height: 26px;
}

@keyframes hex-about-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 600px) {
	.hex-about-hero {
		flex-direction: column;
		align-items: flex-start;
		text-align: right;
		padding: 22px 18px;
	}

	.hex-about-text-layout {
		grid-template-columns: 1fr;
	}
}

/* بخش «کلاس آنلاین»: کارت هر کلاس با وضعیت شروع‌شده/نشده و دکمه‌ی ورود. */
.hex-online-class-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.hex-online-class-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 14px;
}

.hex-online-class-card-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hex-online-class-card-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--hex-text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-online-class-card-status {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-online-class-card-status.is-live {
	color: #16a34a;
	font-weight: 600;
}

.hex-online-class-join-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.hex-online-class-join-btn .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-online-class-join-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.hex-online-class-join-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 600px) {
	.hex-online-class-grid {
		grid-template-columns: 1fr;
	}

	.hex-online-class-card {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

/* ===================== ویجت انتخاب تاریخ شمسی (سال دستی / ماه لیست کشویی / روز دستی) ===================== */

.hex-jalali-date {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	direction: rtl;
	max-width: 100%;
}

.hex-jalali-date .hex-jalali-year,
.hex-jalali-date .hex-jalali-day,
.hex-jalali-date .hex-jalali-month {
	box-sizing: border-box;
}

.hex-jalali-date .hex-jalali-year,
.hex-jalali-date .hex-jalali-day {
	width: 64px;
	padding: 6px 8px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 6px;
	font-size: 13px;
	text-align: center;
	background: var(--hex-bg-card);
	color: var(--hex-text-primary);
}

.hex-jalali-date .hex-jalali-year {
	width: 76px;
}

.hex-jalali-date .hex-jalali-month {
	padding: 6px 8px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 6px;
	font-size: 13px;
	max-width: 100%;
	background: var(--hex-bg-card);
	color: var(--hex-text-primary);
}

/* روی صفحات موبایل، سه فیلد سال/ماه/روز به‌جای عرض ثابت، به‌صورت مساوی در یک
   ردیف کامل پخش می‌شوند و ارتفاع/فونت بزرگ‌تری می‌گیرند تا لمس‌کردن راحت‌تر باشد. */
@media (max-width: 600px) {
	.hex-jalali-date {
		width: 100%;
	}

	.hex-jalali-date .hex-jalali-year,
	.hex-jalali-date .hex-jalali-month,
	.hex-jalali-date .hex-jalali-day {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding: 10px 6px;
		font-size: 14px;
	}

	.hex-jalali-date .hex-jalali-year {
		flex-grow: 1.2;
	}

	.hex-jalali-date .hex-jalali-month {
		flex-grow: 1.6;
	}

	/* داخل فرم‌های فیلتر/جستجوی بالای جدول‌ها (تاریخ حضور و غیاب، تاریخ نمرات و...)
	   این ویجت هم مثل بقیه فیلدها تمام عرض را بگیرد و زیر بقیه عناصر قرار گیرد. */
	.hex-school-search-form .hex-jalali-date {
		width: 100%;
	}

	/* داخل جدول اقساط شهریه، ویجت باید داخل سلول باقی بماند و باعث اسکرول اضافه نشود. */
	.hex-school-view table .hex-jalali-date {
		width: auto;
		min-width: 180px;
	}
}

/* =======================================================================
 * پیام‌ها (فاز 16)
 * ===================================================================== */

.hex-school-nav-badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	margin-right: 6px;
	background: var(--hex-color-error);
	color: var(--hex-text-on-primary);
	font-size: 11px;
	line-height: 1;
	text-align: center;
	border-radius: 50%;
	box-sizing: border-box;
	vertical-align: middle;
}

.hex-conversation-list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	border: 1px solid var(--hex-border);
	border-radius: 8px;
	overflow: hidden;
}

.hex-conversation-item {
	border-bottom: 1px solid var(--hex-border);
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color .2s ease, transform .1s ease, opacity .15s ease;
}

.hex-conversation-item.is-context-active {
	transform: scale( 0.98 );
	box-shadow: inset 0 0 0 2px var(--hex-primary-light);
}

.hex-conversation-item.is-deleting {
	opacity: .5;
	pointer-events: none;
}

.hex-conversation-item:last-child {
	border-bottom: none;
}

.hex-conversation-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}

.hex-conversation-item a:hover {
	background: var(--hex-bg-page);
}

.hex-conversation-item.is-unread {
	background: var(--hex-primary-soft);
}

.hex-conversation-avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.hex-conversation-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hex-conversation-name {
	font-weight: bold;
	color: var(--hex-primary);
}

.hex-conversation-item.is-unread .hex-conversation-name {
	font-weight: 800;
}

.hex-conversation-preview {
	color: var(--hex-text-secondary);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hex-conversation-meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.hex-conversation-time {
	font-size: 11px;
	color: var(--hex-text-muted);
	white-space: nowrap;
}

.hex-conversation-badge {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	background: var(--hex-primary-light);
	color: var(--hex-text-on-primary);
	font-size: 11px;
	text-align: center;
	border-radius: 999px;
}

.hex-thread-header {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 10px;
	margin-bottom: 12px;
	padding: 8px 14px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 100px;
	flex: 0 0 auto;
}

/* حالت نمایش یک مکالمه (خصوصی یا گروهی): برخلاف بقیه‌ی تب‌های پنل که خودشان
   با صفحه اسکرول می‌شوند، این حالت خاص باید مثل اپ‌های چت رفتار کند: فقط
   باکس حباب‌های پیام (hex-thread-messages) اسکرول داخلی دارد و دقیقاً فضای
   بین نوار عنوان (بالا) تا نوار نوشتن پیام (پایین، ثابت) را پر می‌کند؛ خودِ
   صفحه/ناحیه‌ی محتوا دیگر اسکرول نمی‌شود. */
.hex-school-view:has(.hex-thread-messages) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hex-school-view:has(.hex-thread-messages) > .hex-school-subtabs {
	flex: 0 0 auto;
}

.hex-school-view:has(.hex-thread-messages) > #hex-messages-tab-content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#hex-messages-tab-content:has(.hex-thread-messages) > .hex-school-messages {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.hex-thread-header-info {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex: 1 1 auto;
	gap: 8px;
	min-width: 0;
}

.hex-thread-header-info .hex-avatar {
	flex-shrink: 0;
}

.hex-thread-header h3 {
	margin: 0;
	min-width: 0;
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hex-thread-back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	border: 1px solid var(--hex-border);
	color: var(--hex-btn-secondary-text);
	transition: background-color .15s ease, color .15s ease;
}

.hex-thread-back-btn:hover,
.hex-thread-back-btn:focus-visible {
	background: var(--hex-border);
	color: var(--hex-text-heading);
}

.hex-thread-back-btn .hex-icon {
	width: 18px;
	height: 18px;
	margin: 0;
}

.hex-thread-messages {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 12px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 8px;
	margin-bottom: 0;
}

.hex-message-bubble {
	max-width: 75%;
	padding: 8px 12px;
	border-radius: 12px;
	line-height: 1.6;
}

.hex-message-bubble .hex-message-body {
	margin: 0 0 4px;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.hex-message-bubble .hex-message-time {
	display: block;
	font-size: 11px;
	opacity: 0.7;
}

.hex-message-bubble.is-mine {
	align-self: flex-start;
	background: var(--hex-primary-light);
	color: var(--hex-text-on-primary);
	border-bottom-right-radius: 2px;
}

.hex-message-bubble.is-theirs {
	align-self: flex-end;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	color: var(--hex-text-heading);
	border-bottom-left-radius: 2px;
}

/* بازخورد لمسی/بصری هنگام نگه‌داشتن روی یک پیام (پیش از باز شدن منوی «پاسخ»)
   و هنگام پیمایش به یک پیام از طریق کلیک روی نوار «پاسخ به ...» */
.hex-message-bubble {
	cursor: pointer;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

.hex-message-bubble.is-context-active {
	transform: scale( 0.98 );
	box-shadow: 0 0 0 2px var(--hex-primary-light);
}

.hex-message-bubble.is-highlighted {
	box-shadow: 0 0 0 2px var(--hex-color-warning);
}

/* منوی کوچک کلیکی «پاسخ»، هنگام نگه‌داشتن/راست‌کلیک روی یک پیام باز می‌شود. */
.hex-message-context-menu {
	display: none;
	position: fixed;
	z-index: 999;
	min-width: 140px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
	padding: 4px;
	overflow: hidden;
}

.hex-message-context-menu.is-open {
	display: block;
}

.hex-context-menu-item {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 9px 12px;
	background: transparent;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hex-text-heading);
	text-align: right;
	cursor: pointer;
	transition: background-color .15s ease;
}

.hex-context-menu-item:hover,
.hex-context-menu-item:focus-visible {
	background: var(--hex-bg-soft);
}

.hex-context-menu-item-danger {
	color: var(--hex-color-error);
}

.hex-context-menu-item-danger:hover,
.hex-context-menu-item-danger:focus-visible {
	background: rgba(220, 38, 38, .1);
}

/* برچسب «باز ارسال شده» بالای حباب پیام‌هایی که از طریق «باز ارسال»
   ارسال شده‌اند (مشابه پیش‌نمایش پیام پاسخ‌داده‌شده، اما بدون قابلیت کلیک). */
.hex-message-forwarded-label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 6px;
	font-size: 11.5px;
	font-weight: 600;
	font-style: italic;
	opacity: .75;
}

.hex-message-forwarded-label .hex-icon {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

/* پیش‌نمایش پیام نقل‌شده («پاسخ به ...») داخل حباب پیامی که خودش پاسخ به
   پیام دیگری است. */
.hex-message-reply-quote {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-bottom: 6px;
	padding: 5px 10px;
	border-right: 3px solid var(--hex-primary-light);
	border-radius: 6px;
	background: rgba(0, 0, 0, .05);
	cursor: pointer;
	max-width: 100%;
	overflow: hidden;
}

.hex-message-bubble.is-mine .hex-message-reply-quote {
	background: rgba(255, 255, 255, .18);
	border-right-color: var(--hex-text-on-primary);
}

.hex-message-reply-quote-name {
	font-size: 11.5px;
	font-weight: 700;
	opacity: .9;
}

.hex-message-reply-quote-snippet {
	font-size: 12px;
	opacity: .85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hex-message-reply-quote-missing {
	cursor: default;
	font-style: italic;
}

/* نوار پیش‌نمایش «در حال پاسخ به ...» بالای فیلد نوشتن پیام؛ تا وقتی کاربر
   یک پیام را برای پاسخ انتخاب نکرده، مخفی است (توسط JS نمایش داده می‌شود). */
.hex-reply-preview {
	display: none;
	align-items: stretch;
	gap: 8px;
	margin: 8px 10px 0;
	padding: 6px 10px;
	background: var(--hex-bg-soft);
	border-radius: 8px;
	overflow: hidden;
}

.hex-reply-preview-bar {
	flex: 0 0 auto;
	width: 3px;
	border-radius: 2px;
	background: var(--hex-primary-light);
}

.hex-reply-preview-content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	justify-content: center;
}

.hex-reply-preview-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--hex-primary);
}

.hex-reply-preview-snippet {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hex-reply-preview-cancel {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	align-self: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: var(--hex-text-secondary);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.hex-reply-preview-cancel:hover,
.hex-reply-preview-cancel:focus-visible {
	background: var(--hex-border);
	color: var(--hex-text-heading);
}

[data-hex-theme="dark"] .hex-reply-preview {
	background: rgba(255, 255, 255, .06);
}

/* پنجره‌ی «باز ارسال پیام»: باز می‌شود از گزینه‌ی «باز ارسال» در منوی
   نگه‌داشتن روی یک پیام؛ لیست افرادی که کاربر جاری اجازه‌ی ارسال پیام خصوصی
   به آن‌ها را دارد را با امکان جستجو و انتخاب چندتایی نشان می‌دهد. */
.hex-forward-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-forward-modal-overlay.is-open {
	display: flex;
}

.hex-forward-modal {
	position: relative;
	width: 100%;
	max-width: 380px;
	max-height: min(560px, 86vh);
	display: flex;
	flex-direction: column;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 26px 20px 20px;
	box-sizing: border-box;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

.hex-forward-modal-close {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-forward-modal-close:hover,
.hex-forward-modal-close:focus-visible {
	background: var(--hex-border);
	color: var(--hex-btn-secondary-text);
}

.hex-forward-modal-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-heading);
	text-align: center;
}

.hex-forward-modal-search {
	flex: 0 0 auto;
	margin-bottom: 10px;
}

.hex-forward-search-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	font-family: inherit;
	font-size: 13px;
	box-sizing: border-box;
}

.hex-forward-modal-body {
	flex: 1 1 auto;
	min-height: 120px;
	overflow-y: auto;
	margin: 0 -6px;
	padding: 0 6px;
}

.hex-forward-loading-spinner {
	display: inline-block !important;
	margin: 24px auto;
	border-color: rgba(0, 0, 0, .12);
	border-top-color: var(--hex-primary);
}

.hex-forward-modal-body .hex-school-empty {
	text-align: center;
	padding: 24px 8px;
}

.hex-forward-recipient-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hex-forward-recipient-item.is-hidden {
	display: none;
}

.hex-forward-recipient-label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 6px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.hex-forward-recipient-label:hover {
	background: var(--hex-bg-soft);
}

.hex-forward-recipient-checkbox {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	accent-color: var(--hex-primary);
	cursor: pointer;
}

.hex-forward-recipient-avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.hex-forward-recipient-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hex-text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hex-forward-send-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	margin-top: 14px;
	padding: 11px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
}

.hex-forward-send-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.hex-forward-count {
	direction: ltr;
}

#hex-school-message-reply-form textarea,
#hex-school-message-compose-form textarea {
	width: 100%;
	resize: vertical;
}

#hex-school-message-compose-form textarea {
	padding: 10px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 8px;
	background: var(--hex-bg-page);
	font-family: inherit;
	font-size: 14px;
}

[data-hex-theme="dark"] #hex-school-message-compose-form textarea,
[data-hex-theme="dark"] #hex-school-message-reply-form textarea.hex-message-compose-textarea,
[data-hex-theme="dark"] #hex-school-group-message-form textarea.hex-message-compose-textarea {
	color: #ffffff;
}

/* نوار ارسال پیام (چه در مکالمه‌ی خصوصی، چه در گروه): برخلاف بقیه‌ی محتوا
   با صفحه اسکرول نشود؛ همیشه معلق و ثابت در پایین صفحه بماند، دقیقاً مثل
   نوار ارسال پیام در اپ‌های چت. فقط لیست حباب‌های پیام (hex-thread-messages)
   اسکرول داخلی خودش را دارد. */
#hex-school-message-reply-form,
#hex-school-group-message-form {
	position: fixed;
	bottom: 10px;
	left: 10px;
	right: 270px; /* هم‌عرض با منوی سمت راست (hex-school-nav: 260px) به‌علاوه 10px فاصله */
	z-index: 50;
	margin: 0;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-primary-light);
	border-radius: 10px;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden; /* تا فیلد متن و ردیف دکمه‌ها هم از همان گوشه‌های گرد پیروی کنند */
}

#hex-school-message-reply-form p,
#hex-school-group-message-form p {
	margin: 0;
}

/* فیلد متن پیام: ارتفاعش دقیقاً با محتوا رشد می‌کند - از یک خط شروع می‌شود و
   تا حداکثر سه خط بزرگ‌تر می‌شود؛ بعد از آن به‌جای رشد بیشتر نوار، خودِ فیلد
   اسکرول داخلی پیدا می‌کند (اسکریپت frontend.js ارتفاع را روی هر ورودی
   به‌صورت پویا تنظیم می‌کند). */
#hex-school-message-reply-form textarea.hex-message-compose-textarea,
#hex-school-group-message-form textarea.hex-message-compose-textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	resize: none;
	overflow-y: auto;
	line-height: 1.6;
	padding: 8px 16px;
	border: none;
	outline: none;
	box-shadow: none;
	background: transparent;
	min-height: calc( 1.6em + 16px );
	max-height: calc( ( 1.6em * 3 ) + 16px );
}

#hex-school-message-reply-form .hex-message-actions-row,
#hex-school-group-message-form .hex-message-actions-row {
	padding: 4px 10px 8px;
}

/* فضای خالی کافی در پایین ستون گفتگو تا حباب پیام‌ها زیر نوار ثابت ارسال پنهان نشوند.
   این مقدار قبلاً یک عدد ثابت حدسی (بیشتر از ارتفاع واقعی نوار) بود که باعث یک
   فاصله‌ی خالی بزرگ و غیرضروری بین باکس پیام‌ها و نوار ارسال می‌شد. حالا این مقدار
   دقیقاً توسط frontend.js (تابع hexSyncMessageComposeSpacing) بر اساس ارتفاع واقعی
   نوار ارسال محاسبه و به‌صورت inline style تنظیم می‌شود تا فاصله‌ی نمایشی همیشه
   دقیقاً ۵ پیکسل باشد؛ مقدار زیر فقط یک fallback است برای لحظه‌ی خیلی کوتاه پیش از
   اجرای اسکریپت. */
.hex-school-messages:has(#hex-school-message-reply-form),
.hex-school-messages:has(#hex-school-group-message-form) {
	padding-bottom: 60px;
}

@media (max-width: 782px) {
	/* در حالت موبایل منو به‌صورت کشویی/آف‌کانواس است و عرض دیگر کم نمی‌کند */
	#hex-school-message-reply-form,
	#hex-school-group-message-form {
		right: 10px;
		padding: 0;
	}
}

/* ================= فرم «پیام جدید»: انتخاب گیرنده و نوشتن پیام (بازطراحی) ================= */

.hex-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hex-compose-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.hex-compose-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-compose-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 48px 20px;
	text-align: center;
	color: var(--hex-text-secondary);
}

.hex-compose-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	color: var(--hex-text-muted);
}

.hex-compose-empty-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-compose-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 560px;
}

.hex-compose-recipient-field,
.hex-compose-members-field,
.hex-compose-name-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hex-compose-name-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--hex-border-light);
	border-radius: 12px;
	background: var(--hex-bg-card);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
	font-family: inherit;
	font-size: 14px;
	color: var(--hex-text-primary);
	outline: none;
	transition: border-color 0.15s ease;
}

.hex-compose-name-input:focus {
	border-color: var(--hex-primary-light);
	box-shadow: none;
}

[data-hex-theme="dark"] .hex-compose-name-input {
	color: #ffffff;
}

.hex-compose-field-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--hex-text-secondary);
}

.hex-compose-picker {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.hex-compose-search {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--hex-border-light);
	border-radius: 12px;
	background: var(--hex-bg-card);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
	overflow: hidden;
}

.hex-compose-search-icon {
	position: absolute;
	left: 14px;
	display: inline-flex;
	color: var(--hex-text-muted);
	pointer-events: none;
}

.hex-compose-search-icon .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-compose-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px 12px 38px;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: var(--hex-text-primary);
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.hex-compose-search-input:focus {
	border: none;
	outline: none;
	box-shadow: none;
}

.hex-compose-search-input::placeholder {
	color: var(--hex-text-muted);
}

[data-hex-theme="dark"] .hex-compose-search {
	border-color: var(--hex-border-light);
}

.hex-compose-recipient-box {
	border: 1px solid var(--hex-border);
	border-radius: 12px;
	background: var(--hex-bg-card);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.hex-compose-recipient-list {
	display: flex;
	flex-direction: column;
	max-height: 300px;
	overflow-y: auto;
}

.hex-compose-recipient-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid var(--hex-border-light);
	background: transparent;
	color: inherit;
	font-family: inherit;
	text-align: right;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hex-compose-recipient-list .hex-compose-recipient-item:last-child {
	border-bottom: none;
}

/*
 * چک‌باکس عضو در فرم «گروه جدید» عمداً به‌جای تکنیک عمومی .hex-sr-only
 * (که با clip/margin منفی به سایز ۱ پیکسل جمع می‌شود) با opacity صفر و
 * پوشاندن کامل کارت مخفی می‌شود. در تکنیک قبلی، چون چک‌باکس در نگاه
 * مرورگر عملاً «خارج از دید» محاسبه می‌شد، فوکوس گرفتنش (هنگام لمس
 * آیتم‌های پایینی لیست که با اسکرول داخلی نمایش داده می‌شوند) باعث
 * می‌شد مرورگرهای موبایل کل صفحه را برای نمایش آن اسکرول کنند. با این
 * روش، محدوده‌ی چک‌باکس دقیقاً همان محدوده‌ی کارت (که از قبل در دید
 * کاربر است) است، بنابراین مرورگر نیازی به اسکرول اضافه نمی‌بیند.
 */
.hex-compose-member-checkbox {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	clip: auto;
	overflow: visible;
	white-space: normal;
	cursor: pointer;
	z-index: 1;
}

.hex-compose-recipient-item:hover,
.hex-compose-recipient-item:focus-visible,
.hex-compose-recipient-item:focus-within {
	background: var(--hex-bg-page);
	outline: none;
}

.hex-compose-recipient-item.is-selected {
	background: var(--hex-primary-soft);
}

.hex-compose-recipient-avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.hex-compose-recipient-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.hex-compose-recipient-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--hex-text-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hex-compose-recipient-item.is-selected .hex-compose-recipient-name {
	color: var(--hex-primary-dark);
}

.hex-compose-recipient-role {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-compose-recipient-check {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hex-primary-light);
	color: var(--hex-text-on-primary);
}

.hex-compose-recipient-check .hex-icon {
	width: 13px;
	height: 13px;
	stroke-width: 3;
}

.hex-compose-recipient-item.is-selected .hex-compose-recipient-check {
	display: inline-flex;
}

.hex-compose-no-results {
	margin: 0;
	padding: 18px 14px;
	text-align: center;
	font-size: 13px;
	color: var(--hex-text-muted);
}

.hex-compose-textarea-wrap {
	border: 1px solid var(--hex-border);
	border-radius: 14px;
	background: var(--hex-bg-card);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.hex-compose-textarea-wrap textarea.hex-message-compose-textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	resize: none;
	overflow-y: auto;
	line-height: 1.6;
	padding: 14px 16px 6px;
	border: none;
	outline: none;
	box-shadow: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: var(--hex-text-primary);
	min-height: calc( 1.6em + 20px );
	max-height: calc( ( 1.6em * 6 ) + 20px );
}

.hex-compose-textarea-wrap .hex-message-actions-row {
	padding: 6px 12px 12px;
}

.hex-compose-form .hex-send-btn {
	transition: opacity 0.15s ease;
}

.hex-compose-form .hex-send-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

[data-hex-theme="dark"] .hex-compose-search-input,
[data-hex-theme="dark"] .hex-compose-textarea-wrap textarea.hex-message-compose-textarea {
	color: #ffffff;
}

@media (max-width: 782px) {
	.hex-compose-form {
		max-width: 100%;
	}
}

/* پیوست فایل در حباب‌های پیام (فاز 16 - ارسال فایل) */
.hex-message-attachment {
	display: block;
	margin-bottom: 6px;
	text-decoration: none;
}

.hex-message-attachment-thumb {
	max-width: 220px;
	max-height: 220px;
	border-radius: 8px;
	display: block;
}

.hex-message-attachment-video {
	max-width: 260px;
	max-height: 320px;
	width: 100%;
	border-radius: 8px;
	display: block;
	margin-bottom: 6px;
	background: #000;
}

.hex-message-attachment-file {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	color: inherit;
}

.hex-message-bubble.is-theirs .hex-message-attachment-file {
	background: var(--hex-bg-soft);
}

.hex-message-attachment-icon {
	display: inline-flex;
	align-items: center;
}

.hex-message-attachment-name {
	font-size: 13px;
	text-decoration: underline;
	word-break: break-all;
}

.hex-message-attachment-size {
	font-size: 11px;
	opacity: 0.75;
	white-space: nowrap;
}

/* ردیف عملیات فرم پیام (سنجاق پیوست + دکمه ارسال) - سبک تلگرام.
   row-reverse: دکمه‌های پیوست/ضبط صدا سمت چپ و دکمه ارسال سمت راست قرار بگیرند. */
.hex-message-actions-row {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.hex-attach-input {
	display: none;
}

.hex-attach-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 1px solid var(--hex-border-strong);
	border-radius: 50%;
	background: var(--hex-bg-card);
	color: var(--hex-primary);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hex-attach-btn:hover {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-attach-filename {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	color: var(--hex-primary-light);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* وقتی داخل ناحیه‌ی نام فایل، پیش‌نمایش پیام صوتی نمایش داده می‌شود (به‌جای
   متن ساده)، باید به‌صورت ردیف افقی از دکمه‌ها دیده شود، نه یک متن تک‌خط
   بریده‌شده. */
.hex-attach-filename:has( .hex-voice-preview ),
.hex-attach-filename:has( .hex-attach-progress ) {
	overflow: visible;
	white-space: nowrap;
}

/* نوار پیشرفت آپلود پیش از ارسال پیام: هم‌زمان با انتخاب/ضبط فایل نمایش داده
   می‌شود تا فایل زودتر آپلود شود و ارسال خودِ پیام (بعد از زدن دکمه ارسال)
   سریع انجام شود. */
.hex-attach-progress {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.hex-attach-progress-name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-attach-progress-bar {
	position: relative;
	flex: 1 1 auto;
	min-width: 50px;
	height: 6px;
	border-radius: 999px;
	background: var(--hex-border-strong);
	overflow: hidden;
}

.hex-attach-progress-fill {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 0%;
	background: var(--hex-primary);
	border-radius: 999px;
	transition: width 0.15s ease;
}

.hex-attach-progress.is-done .hex-attach-progress-fill {
	background: #2e7d32;
}

.hex-attach-progress.is-error .hex-attach-progress-fill {
	background: #c0392b;
	width: 100% !important;
}

.hex-attach-progress-percent {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--hex-primary-light);
	white-space: nowrap;
}

.hex-attach-progress-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
}

.hex-attach-progress-remove:hover {
	opacity: 1;
}

.hex-voice-preview {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 999px;
	background: var(--hex-primary-soft);
}

.hex-voice-preview-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--hex-primary);
	color: var(--hex-text-on-primary);
	cursor: pointer;
}

.hex-voice-preview-toggle .hex-voice-pause-icon {
	display: none;
}

.hex-voice-preview.is-playing .hex-voice-play-icon {
	display: none;
}

.hex-voice-preview.is-playing .hex-voice-pause-icon {
	display: inline-block;
}

.hex-voice-preview-duration {
	font-size: 12px;
	color: var(--hex-primary);
	white-space: nowrap;
}

.hex-voice-preview-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--hex-text-secondary);
	cursor: pointer;
}

.hex-voice-preview-remove:hover {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}


.hex-mic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 1px solid var(--hex-border-strong);
	border-radius: 50%;
	background: var(--hex-bg-card);
	color: var(--hex-primary);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hex-mic-btn:hover {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-mic-btn.is-recording {
	background: var(--hex-btn-danger-bg);
	border-color: var(--hex-btn-danger-bg);
	color: var(--hex-btn-danger-text);
	animation: hex-mic-pulse 1.2s infinite;
}

@keyframes hex-mic-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
	}
}

/* پخش‌کننده سفارشی پیام صوتی: دکمه دو حالته پخش/توقف + نوار پیشرفت */
.hex-audio-player {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 240px;
	max-width: 100%;
	box-sizing: border-box;
}

.hex-message-attachment-audio {
	display: none !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.hex-audio-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s ease;
}

.hex-audio-toggle svg {
	width: 14px;
	height: 14px;
}

.hex-audio-icon-stop {
	display: none;
}

.hex-audio-toggle.is-playing .hex-audio-icon-play {
	display: none;
}

.hex-audio-toggle.is-playing .hex-audio-icon-stop {
	display: inline;
}

.hex-audio-progress {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-width: 60px;
	height: 4px;
	border-radius: 999px;
	overflow: hidden;
}

.hex-audio-progress-fill {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 0%;
	border-radius: 999px;
	transition: width 0.1s linear;
}

.hex-message-bubble.is-mine .hex-audio-toggle {
	background: rgba(255, 255, 255, 0.25);
	color: var(--hex-text-on-primary);
}

.hex-message-bubble.is-mine .hex-audio-toggle:hover {
	background: rgba(255, 255, 255, 0.35);
}

.hex-message-bubble.is-mine .hex-audio-progress {
	background: rgba(255, 255, 255, 0.25);
}

.hex-message-bubble.is-mine .hex-audio-progress-fill {
	background: var(--hex-bg-card);
}

.hex-message-bubble.is-theirs .hex-audio-toggle {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-light);
}

.hex-message-bubble.is-theirs .hex-audio-toggle:hover {
	background: var(--hex-primary-soft);
}

.hex-message-bubble.is-theirs .hex-audio-progress {
	background: var(--hex-border);
}

.hex-message-bubble.is-theirs .hex-audio-progress-fill {
	background: var(--hex-primary-light);
}

/* حالت لودینگ هنگام سوییچ Ajax بین تب‌های «پیام‌های شخصی» و «گروه‌ها» */
#hex-messages-tab-content.is-loading {
	position: relative;
	min-height: 120px;
	opacity: 0.5;
	pointer-events: none;
}

/* آواتار پیش‌فرض گروه در لیست مکالمات و سربرگ مکالمه گروهی (وقتی گروه عکس
   نداشته باشد و آیکن 👥 نمایش داده شود؛ اگر گروه عکس داشته باشد، همین کلاس
   روی تگ img هم اعمال می‌شود و فقط اندازه و گردی را کنترل می‌کند) */
.hex-group-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--hex-primary-soft);
	font-size: 18px;
	flex-shrink: 0;
}

/* فیلد انتخاب عکس گروه در فرم «گروه جدید»؛ برخلاف حالت پیش‌فرض وسط‌چین
   hex-photo-upload-field (که برای فرم‌های ثبت‌نام طراحی شده)، در فرم فشرده‌ی
   ساخت گروه هم‌راستا با سایر فیلدها از راست چیده می‌شود. */
.hex-group-photo-upload-field {
	align-items: flex-start;
	text-align: right;
}

.hex-group-photo-upload-field .hex-photo-upload-control {
	max-width: 100%;
}

.hex-group-member-count {
	font-size: 12px;
	font-weight: 400;
	color: var(--hex-text-muted);
}

/* نام فرستنده بالای حباب پیام‌های گروهی (فقط برای پیام‌های دیگران) */
.hex-message-sender-name {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hex-primary-light);
}

/* ردیف افقی ساعت شروع و پایان در فرم ثبت گزارش (حتی در موبایل) */
.hex-school-time-row {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: flex-start;
}

.hex-school-time-row p {
	flex: 1 1 0;
	min-width: 0;
}

.hex-school-time-row input[type="time"] {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.hex-school-time-row {
		flex-direction: row;
		gap: 8px;
	}
}

/* ================= پاپ‌آپ «مشاهده جزئیات» گزارش (تب گزارش‌های ثبت‌شده) ================= */

.hex-report-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-report-modal-overlay.is-open {
	display: flex;
}

.hex-report-modal {
	background: var(--hex-bg-card);
	border-radius: 8px;
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
	direction: rtl;
}

.hex-report-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--hex-border);
	background: var(--hex-primary);
	border-radius: 8px 8px 0 0;
}

.hex-report-modal-title {
	margin: 0;
	color: var(--hex-text-on-primary);
	font-size: 16px;
	word-break: break-word;
}

.hex-report-modal-close {
	background: transparent;
	border: none;
	color: var(--hex-text-on-primary);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.hex-report-modal-close:hover {
	color: #5fd3bb;
}

.hex-report-modal-body {
	padding: 16px 20px 20px;
}

.hex-report-modal-body p {
	margin: 0 0 10px;
	color: var(--hex-text-heading);
	word-break: break-word;
}

.hex-report-modal-body strong {
	color: var(--hex-primary);
}

.hex-report-field-row-description {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--hex-border);
}

.hex-report-field-description {
	margin: 8px 0 0;
	color: var(--hex-text-heading);
	white-space: pre-wrap;
	line-height: 1.8;
}

/* اعلانات */

.hex-school-notifications > h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hex-text-primary);
}

.hex-school-notifications-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
	color: var(--hex-text-on-primary);
}

.hex-school-notifications-title-icon .hex-icon {
	width: 15px;
	height: 15px;
}

.hex-school-notifications-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 48px 20px;
	border: 1px dashed var(--hex-border-strong);
	border-radius: 14px;
	background: var(--hex-bg-page);
	text-align: center;
}

.hex-school-notifications-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-light);
}

.hex-school-notifications-empty-icon .hex-icon {
	width: 20px;
	height: 20px;
}

.hex-school-notifications-empty .hex-school-empty {
	margin: 0;
	color: var(--hex-text-secondary);
}

.hex-school-notification-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hex-school-notification-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--hex-border);
	border-radius: 12px;
	background: var(--hex-bg-card);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hex-school-notification-row:hover {
	border-color: #a7e8dc;
	box-shadow: 0 6px 16px rgba(22, 160, 133, 0.12);
	transform: translateY(-1px);
}

.hex-school-notification-row.is-unread {
	border-color: #99e6d1;
	background: linear-gradient(180deg, var(--hex-primary-soft) 0%, var(--hex-bg-card) 65%);
}

.hex-school-notification-row-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--hex-bg-soft);
	color: var(--hex-text-muted);
}

.hex-school-notification-row.is-unread .hex-school-notification-row-icon {
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
	color: var(--hex-text-on-primary);
}

/* موارد انضباطی: آیکن سبز برای مورد مثبت و قرمز برای مورد منفی */
.hex-school-notification-row-icon.hex-discipline-icon-positive {
	background: linear-gradient(135deg, var(--hex-color-success), var(--hex-color-success));
	color: var(--hex-text-on-primary);
}

.hex-school-notification-row-icon.hex-discipline-icon-negative {
	background: linear-gradient(135deg, var(--hex-color-error), var(--hex-color-error));
	color: var(--hex-text-on-primary);
}

.hex-school-notification-row-icon .hex-icon {
	width: 18px;
	height: 18px;
}

.hex-school-notification-row-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hex-school-notification-row-title-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.hex-school-notification-row-title {
	min-width: 0;
	color: var(--hex-text-heading);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-school-notification-row-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--hex-text-muted);
	font-size: 12px;
}

.hex-school-notification-row-date .hex-icon {
	width: 12px;
	height: 12px;
}

.hex-school-unread-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
	font-size: 11px;
	font-weight: 600;
}

/* برچسب «فقط معلم‌ها» / «فقط دانش‌آموزها» برای اعلانات هدفمند */
.hex-school-notification-audience-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
	font-size: 11px;
	font-weight: 600;
}

.hex-school-unread-dot {
	position: relative;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hex-color-success);
}

.hex-school-unread-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hex-color-success);
	transform: translate(50%, -50%);
	animation: hex-school-unread-pulse 1.6s ease-out infinite;
}

@keyframes hex-school-unread-pulse {
	0% {
		transform: translate(50%, -50%) scale(1);
		opacity: 0.7;
	}
	100% {
		transform: translate(50%, -50%) scale(2.8);
		opacity: 0;
	}
}

.hex-notification-view-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--hex-border-strong);
	background: var(--hex-bg-page);
	color: var(--hex-primary);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hex-notification-view-btn .hex-icon {
	width: 13px;
	height: 13px;
	transform: scaleX(-1);
}

.hex-notification-view-btn:hover {
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: var(--hex-text-on-primary);
}

.hex-notification-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	backdrop-filter: blur(2px);
}

.hex-notification-modal-overlay.is-open {
	display: flex;
}

.hex-notification-modal {
	background: var(--hex-bg-card);
	border-radius: 14px;
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
	direction: rtl;
	animation: hex-notification-modal-in 0.18s ease-out;
}

@keyframes hex-notification-modal-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hex-notification-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--hex-border);
	position: sticky;
	top: 0;
	background: var(--hex-bg-card);
	border-radius: 14px 14px 0 0;
}

.hex-notification-modal-header-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--hex-primary-light), var(--hex-primary));
	color: var(--hex-text-on-primary);
}

.hex-notification-modal-header-icon .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-notification-modal-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-notification-modal-close {
	flex: 0 0 auto;
	background: var(--hex-bg-soft);
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: var(--hex-text-secondary);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-notification-modal-close:hover {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-notification-modal-body {
	padding: 18px 20px 22px;
}

.hex-notification-modal-date {
	display: inline-flex;
	align-items: center;
	margin: 0 0 14px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--hex-bg-soft);
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-notification-modal-content {
	margin: 0;
	color: var(--hex-text-heading);
	white-space: pre-wrap;
	line-height: 1.9;
	word-break: break-word;
}

@media (max-width: 640px) {
	.hex-school-notification-row {
		flex-wrap: wrap;
	}

	.hex-notification-view-btn {
		width: 100%;
		justify-content: center;
	}
}

/* --- پاپ‌آپ مدرن تأیید خروج از حساب کاربری (جایگزین confirm پیش‌فرض مرورگر) --- */

.hex-logout-confirm-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-logout-confirm-overlay.is-open {
	display: flex;
}

.hex-logout-confirm-modal {
	position: relative;
	width: 100%;
	max-width: 360px;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 30px 24px 24px;
	box-sizing: border-box;
	text-align: center;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

@keyframes hexLogoutConfirmPop {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.hex-logout-confirm-close {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-logout-confirm-close:hover {
	background: var(--hex-border);
	color: var(--hex-btn-secondary-text);
}

.hex-logout-confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #fef2f2;
	color: var(--hex-color-error);
}

.hex-logout-confirm-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-logout-confirm-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-logout-confirm-text {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--hex-text-secondary);
	line-height: 1.8;
}

.hex-logout-confirm-actions {
	display: flex;
	gap: 10px;
}

.hex-logout-confirm-actions .hex-school-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

.hex-school-btn-danger {
	background: var(--hex-btn-danger-bg);
	border-color: var(--hex-btn-danger-bg);
	color: var(--hex-btn-danger-text);
}

.hex-school-btn-danger:hover {
	background: var(--hex-btn-danger-bg-hover);
	border-color: var(--hex-btn-danger-bg-hover);
	color: var(--hex-btn-danger-text);
}

.hex-logout-confirm-submit .hex-icon {
	width: 16px;
	height: 16px;
}

/* --- پاپ‌آپ خطای ورود (صفحه ورود: نام کاربری/رمز اشتباه، قفل موقت و ...) --- */

.hex-login-error-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-login-error-overlay.is-open {
	display: flex;
}

.hex-login-error-modal {
	position: relative;
	width: 100%;
	max-width: 360px;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 30px 24px 24px;
	box-sizing: border-box;
	text-align: center;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

.hex-login-error-close {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-login-error-close:hover {
	background: var(--hex-border);
	color: var(--hex-btn-secondary-text);
}

.hex-login-error-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #fef2f2;
	color: var(--hex-color-error);
}

.hex-login-error-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-login-error-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-login-error-text {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--hex-text-secondary);
	line-height: 1.8;
}

.hex-login-error-actions {
	display: flex;
}

.hex-login-error-actions .hex-school-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

/* --- لودینگ تمام‌صفحه «ورود موفق» (پس از ورود درست، تا انتقال خودکار به پنل) --- */

.hex-login-success-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-login-success-overlay.is-open {
	display: flex;
}

.hex-login-success-card {
	position: relative;
	width: 100%;
	max-width: 280px;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 30px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

.hex-login-success-text {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-login-success-loader {
	position: relative;
	width: 48px;
	height: 48px;
}

.hex-login-success-ring {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: var(--hex-primary-light);
	border-right-color: var(--hex-primary-light);
	animation: hex-school-spin 0.9s linear infinite;
}

.hex-login-success-ring-2 {
	top: 12px;
	right: 12px;
	width: 25px;
	height: 25px;
	border-top-color: var(--hex-primary);
	border-left-color: var(--hex-primary);
	border-right-color: transparent;
	animation-duration: 1.3s;
	animation-direction: reverse;
}

.hex-login-success-welcome {
	margin: 0;
	font-size: 13px;
	color: var(--hex-text-secondary);
	line-height: 1.7;
}

/* --- لودینگ تمام‌صفحه «در حال خروج» (از تأیید در پاپ‌آپ خروج تا انتقال خودکار) --- */

.hex-logout-loading-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-logout-loading-overlay.is-open {
	display: flex;
}

.hex-logout-loading-card {
	position: relative;
	width: 100%;
	max-width: 280px;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 30px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

.hex-logout-loading-text {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-logout-loading-loader {
	position: relative;
	width: 48px;
	height: 48px;
}

.hex-logout-loading-ring {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: var(--hex-primary-light);
	border-right-color: var(--hex-primary-light);
	animation: hex-school-spin 0.9s linear infinite;
}

.hex-logout-loading-ring-2 {
	top: 12px;
	right: 12px;
	width: 25px;
	height: 25px;
	border-top-color: var(--hex-primary);
	border-left-color: var(--hex-primary);
	border-right-color: transparent;
	animation-duration: 1.3s;
	animation-direction: reverse;
}

/* --- پاپ‌آپ مدرن تأیید عمومی (برای عملیات سالانه و موارد مشابه، به‌جای confirm پیش‌فرض مرورگر) --- */

.hex-confirm-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-confirm-modal-overlay.is-open {
	display: flex;
}

.hex-confirm-modal {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 30px 24px 24px;
	box-sizing: border-box;
	text-align: center;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

.hex-confirm-modal-close {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-confirm-modal-close:hover {
	background: var(--hex-border);
	color: var(--hex-btn-secondary-text);
}

.hex-confirm-modal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #fffbeb;
	color: #d97706;
}

.hex-confirm-modal-icon.hex-confirm-modal-icon--danger {
	background: #fef2f2;
	color: var(--hex-color-error);
}

.hex-confirm-modal-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-confirm-modal-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-confirm-modal-text {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--hex-text-secondary);
	line-height: 1.8;
}

.hex-confirm-modal-actions {
	display: flex;
	gap: 10px;
}

.hex-confirm-modal-actions .hex-school-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

.hex-school-btn-warning {
	background: var(--hex-color-warning);
	border-color: var(--hex-color-warning);
	color: var(--hex-text-on-primary);
}

.hex-school-btn-warning:hover {
	background: #d97706;
	border-color: #d97706;
	color: var(--hex-text-on-primary);
}

.hex-confirm-modal-submit .hex-icon {
	width: 16px;
	height: 16px;
}

/* ===================== پاپ‌آپ «آزمون جدید» (به دانش‌آموز) ===================== */

/* --- پاپ‌آپ (toast) «خوش‌آمدگویی» هنگام ورود به پنل: گوشه‌ی بالای صفحه،
   چند ثانیه نمایش داده می‌شود و خودش با انیمیشن محو می‌شود (نک. frontend.js
   برای منطق نمایش/زمان‌بندی؛ اینجا فقط ظاهر و ترنزیشن آن است). --- */

.hex-welcome-toast {
	position: fixed;
	top: 18px;
	inset-inline-end: 18px;
	z-index: 100010;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 340px;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--hex-bg-card);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
	border: 1px solid var(--hex-border-light);
	opacity: 0;
	transform: translateY(-14px);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.hex-welcome-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.hex-welcome-toast-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	color: var(--hex-text-on-primary);
}

.hex-welcome-toast-icon .hex-icon {
	width: 20px;
	height: 20px;
}

.hex-welcome-toast-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hex-welcome-toast-title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--hex-text-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hex-welcome-toast-sub {
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-welcome-toast-close {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-inline-start: auto;
	border: none;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-welcome-toast-close:hover {
	background: var(--hex-border);
	color: var(--hex-btn-secondary-text);
}

@media (max-width: 600px) {
	.hex-welcome-toast {
		top: 12px;
		inset-inline-end: 12px;
		inset-inline-start: 12px;
		max-width: none;
	}
}

.hex-new-exam-popup-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.hex-new-exam-popup-overlay.is-open {
	display: flex;
}

.hex-new-exam-popup {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
	padding: 30px 24px 24px;
	box-sizing: border-box;
	text-align: center;
	direction: rtl;
	animation: hexLogoutConfirmPop 0.18s ease;
}

.hex-new-exam-popup-close {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.hex-new-exam-popup-close:hover {
	background: var(--hex-border);
	color: var(--hex-btn-secondary-text);
}

.hex-new-exam-popup-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--hex-primary-soft);
	color: var(--hex-primary);
}

.hex-new-exam-popup-icon .hex-icon {
	width: 26px;
	height: 26px;
}

.hex-new-exam-popup-title {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-new-exam-popup-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 260px;
	overflow-y: auto;
	text-align: right;
}

.hex-new-exam-popup-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--hex-bg-soft);
	border: 1px solid var(--hex-border-light);
}

.hex-new-exam-popup-item-type {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

.hex-new-exam-popup-item-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hex-text-heading);
}

.hex-new-exam-popup-item-subject {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

.hex-new-exam-popup-item-subject::before {
	content: '\2022';
	margin-left: 6px;
	color: var(--hex-border-strong);
}

.hex-new-exam-popup-actions {
	display: flex;
	gap: 10px;
}

.hex-new-exam-popup-actions .hex-school-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

.hex-new-exam-popup-view .hex-icon {
	width: 16px;
	height: 16px;
}

/* ===================== نظرسنجی ===================== */

/* --- هدر بزرگ (hero) و کارت‌های بخش‌بندی فرم «ایجاد نظرسنجی جدید» --- */

.hex-survey-form-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
	padding: 22px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hex-primary) 0%, var(--hex-primary-light) 100%);
	box-shadow: 0 10px 24px -8px rgba(var(--hex-primary-rgb), 0.4);
	color: var(--hex-text-on-primary);
}

.hex-survey-form-hero-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
}

.hex-survey-form-hero-icon .hex-icon {
	width: 26px;
	height: 26px;
	color: var(--hex-text-on-primary);
}

.hex-survey-form-hero-text h2 {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hex-text-on-primary);
}

.hex-survey-form-hero-text p {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
}

.hex-survey-form-card {
	margin-bottom: 20px;
	padding: 22px 24px 24px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.08);
	transition: box-shadow 0.2s ease;
}

.hex-survey-form-card:hover {
	box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.12);
}

.hex-survey-form-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--hex-primary-soft-hover);
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-primary-dark);
}

.hex-survey-form-card-title .hex-icon {
	width: 18px;
	height: 18px;
	color: var(--hex-primary);
}

.hex-survey-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-light));
	color: var(--hex-text-on-primary);
	font-size: 13px;
	font-weight: 700;
}

.hex-survey-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 20px;
}

.hex-survey-form-grid .hex-grid-full {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.hex-survey-form-grid {
		grid-template-columns: 1fr;
	}
}

/* --- ترازبندی آیکن/متن لیبل‌ها و مدرن‌سازی فیلدهای فرم «ایجاد نظرسنجی» --- */

#hex-school-create-survey-form p {
	margin-bottom: 16px;
}

#hex-school-create-survey-form label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--hex-primary-dark);
	line-height: 1.4;
}

#hex-school-create-survey-form label .hex-icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--hex-primary);
}

#hex-school-create-survey-form input[type="text"],
#hex-school-create-survey-form textarea,
#hex-school-create-survey-form select {
	width: 100%;
	max-width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--hex-primary-soft-hover);
	border-radius: 10px;
	background: var(--hex-primary-soft);
	color: #0f172a;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#hex-school-create-survey-form textarea {
	resize: vertical;
	line-height: 1.7;
}

#hex-school-create-survey-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316a085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 12px center;
	cursor: pointer;
}

#hex-school-create-survey-form input[type="text"]::placeholder,
#hex-school-create-survey-form textarea::placeholder {
	color: var(--hex-text-muted);
}

#hex-school-create-survey-form input[type="text"]:hover,
#hex-school-create-survey-form textarea:hover,
#hex-school-create-survey-form select:hover {
	border-color: var(--hex-primary-light);
}

#hex-school-create-survey-form input[type="text"]:focus,
#hex-school-create-survey-form textarea:focus,
#hex-school-create-survey-form select:focus {
	outline: none;
	border-color: var(--hex-primary);
	background-color: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.15);
}

#hex-school-create-survey-form .hex-survey-form-grid p,
#hex-school-create-survey-form .hex-survey-options-grid p {
	margin-bottom: 0;
}

/* --- کارت هر سوال داخل repeater --- */

.hex-survey-question-row.hex-school-staff-row {
	padding: 18px 20px 20px;
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	background: var(--hex-bg-card);
	box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.08);
}

.hex-survey-question-row legend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 12px;
	margin-bottom: 14px;
	border-bottom: 1px dashed var(--hex-primary-soft-hover);
	color: var(--hex-primary-dark);
	font-weight: 700;
}

.hex-survey-question-row legend > span:first-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hex-survey-question-row legend .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-survey-question-row legend .hex-school-remove-row {
	margin-right: 0;
	color: var(--hex-color-error);
}

.hex-survey-add-question-btn {
	width: 100%;
	justify-content: center;
	border-style: dashed;
	background: var(--hex-primary);
	border-color: var(--hex-primary);
	color: #ffffff;
}

.hex-survey-add-question-btn:hover {
	background: var(--hex-primary-dark);
	border-color: var(--hex-primary-dark);
	color: #ffffff;
}

/* پالت تیره — ایجاد نظرسنجی جدید: عنوان کارت‌ها، لیبل فیلدها، و عنوان هر
   سوال داخل repeater با var(--hex-primary-dark) روی پس‌زمینه‌ی تیره ناخوانا
   بودند؛ فلش منوی کشویی هم برای خوانایی روی پس‌زمینه‌ی تیره سفید می‌شود. */
[data-hex-theme="dark"] .hex-survey-form-card-title,
[data-hex-theme="dark"] #hex-school-create-survey-form label,
[data-hex-theme="dark"] .hex-survey-question-row legend {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-create-survey-form input[type="text"],
[data-hex-theme="dark"] #hex-school-create-survey-form textarea,
[data-hex-theme="dark"] #hex-school-create-survey-form select {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-create-survey-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-hex-theme="dark"] #hex-school-create-survey-form select option {
	color: #0f172a;
}

.hex-survey-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-survey-status-badge.hex-survey-status-active {
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
}

.hex-survey-status-badge.hex-survey-status-closed {
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
}

.hex-survey-status-badge.hex-survey-status-answered {
	background: #ede9fe;
	color: #6d28d9;
}

.hex-survey-options-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
}

/* --- کارت نتایج هر سوال (تب «نتایج نظرسنجی») --- */

.hex-survey-result-card {
	padding: 16px 18px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
}

.hex-survey-result-question {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-survey-result-total {
	font-size: 12px;
	font-weight: 600;
	color: var(--hex-text-secondary);
	white-space: nowrap;
}

.hex-survey-result-option {
	margin-bottom: 10px;
}

.hex-survey-result-option:last-child {
	margin-bottom: 0;
}

.hex-survey-result-option-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--hex-btn-secondary-text);
}

.hex-survey-result-bar {
	width: 100%;
	height: 10px;
	border-radius: 6px;
	background: var(--hex-border);
	overflow: hidden;
}

.hex-survey-result-bar-fill {
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--hex-color-info) 0%, var(--hex-color-info-light) 100%);
	transition: width 0.3s ease;
}

/* --- لیست نظرسنجی‌های فعال قابل پاسخ‌دهی (دانش‌آموز/والد) --- */

.hex-survey-respond-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hex-survey-respond-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
}

.hex-survey-respond-card-text h4 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-survey-respond-card-text p {
	margin: 0;
	font-size: 13px;
	color: var(--hex-text-secondary);
}

/* --- فرم پاسخ‌دهی به یک نظرسنجی --- */

.hex-survey-answer-question {
	padding: 14px 18px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
}

.hex-survey-answer-question legend {
	padding: 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hex-text-primary);
}

.hex-survey-answer-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.hex-survey-answer-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	cursor: pointer;
	font-size: 13.5px;
	color: var(--hex-btn-secondary-text);
	transition: background 0.12s ease, border-color 0.12s ease;
}

.hex-survey-answer-option:hover {
	background: var(--hex-color-info-bg);
	border-color: #d0c3f7;
}

.hex-survey-answer-option input[type="radio"] {
	accent-color: var(--hex-color-info);
}

/* ================= بخش «آزمون»: سازنده‌ی سوالات (فرم افزودن/ویرایش) ================= */

.hex-quiz-questions {
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--hex-border);
}

.hex-quiz-questions-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.hex-quiz-questions-header h4 {
	margin: 0;
	font-size: 14px;
	color: var(--hex-text-primary);
}

.hex-quiz-add-question-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.hex-quiz-question-card {
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.hex-quiz-question-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.hex-quiz-question-number {
	font-size: 13px;
	font-weight: 700;
	color: var(--hex-primary);
}

.hex-quiz-remove-question-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--hex-color-error);
	border-radius: 999px;
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
	cursor: pointer;
}

.hex-quiz-remove-question-btn .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-quiz-remove-question-btn:hover {
	background: var(--hex-color-error-bg);
}

.hex-quiz-options-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 16px;
}

.hex-quiz-option-field label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hex-text-secondary);
	margin-bottom: 4px;
}

.hex-quiz-option-field input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 9px;
	border: 1px solid var(--hex-border-strong);
	border-radius: 6px;
	font-family: inherit;
}

.hex-quiz-option-field input[type="text"]:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	box-shadow: 0 0 0 3px rgba( 26, 188, 156, 0.15 );
}

.hex-quiz-option-hint {
	margin: 6px 0 0;
	font-size: 11px;
	color: var(--hex-text-muted);
}

.hex-quiz-no-questions {
	margin-bottom: 12px;
}

#hex-quiz-question-template {
	display: none;
}

/* ========== بازطراحی مدرن فرم «افزودن/ویرایش آزمون» در بخش «آزمون تستی» ==========
   این استایل‌ها فقط به فرم ساخت/ویرایش آزمون تستی (#hex-school-quiz-form) و کارت
   بیرونی آن اختصاص دارند تا روی فرم‌های مشابهی که از همان کلاس‌های عمومی استفاده
   می‌کنند (برنامه امتحانی، آزمون تشریحی) اثر نگذارد. */

.hex-exam-form-card:has( #hex-school-quiz-form ) {
	max-width: 820px;
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 22px rgba( 15, 23, 42, 0.07 );
}

.hex-exam-form-card:has( #hex-school-quiz-form ) .hex-exam-form-title {
	margin: 0;
	padding: 20px 24px;
	background: linear-gradient( 135deg, rgba( 22, 160, 133, 0.09 ), rgba( 26, 188, 156, 0.02 ) );
	border-bottom: 1px solid var(--hex-border);
	font-size: 17px;
}

.hex-exam-form-card:has( #hex-school-quiz-form ) .hex-exam-form-title .hex-icon {
	width: 34px;
	height: 34px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--hex-primary);
	color: var(--hex-text-on-primary);
}

#hex-school-quiz-form {
	display: block;
	padding: 24px;
}

#hex-school-quiz-form .hex-exam-form-grid {
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	padding: 18px 20px 6px;
	margin-bottom: 26px;
}

#hex-school-quiz-form .hex-exam-field label {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

#hex-school-quiz-form .hex-exam-field select,
#hex-school-quiz-form .hex-exam-field input[type="text"],
#hex-school-quiz-form .hex-exam-field input[type="number"] {
	background: var(--hex-bg-card);
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	padding: 10px 12px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#hex-school-quiz-form .hex-exam-field select:focus,
#hex-school-quiz-form .hex-exam-field input:focus {
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 4px rgba( 22, 160, 133, 0.12 );
}

#hex-school-quiz-form .hex-quiz-questions {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

#hex-school-quiz-form .hex-quiz-questions-header {
	margin-bottom: 16px;
}

#hex-school-quiz-form .hex-quiz-questions-header h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
}

#hex-school-quiz-form .hex-quiz-questions-header h4::before {
	content: '';
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--hex-primary);
}

#hex-school-quiz-form .hex-quiz-add-question-btn {
	padding: 9px 18px;
	border: 1.5px dashed var(--hex-primary);
	border-radius: 999px;
	background: rgba( 22, 160, 133, 0.06 );
	color: var(--hex-primary-dark);
	font-weight: 700;
	transition: background 0.18s ease, color 0.18s ease;
}

#hex-school-quiz-form .hex-quiz-add-question-btn:hover {
	background: var(--hex-primary);
	border-style: solid;
	color: var(--hex-text-on-primary);
}

#hex-school-quiz-form .hex-quiz-no-questions {
	padding: 30px 16px;
	border: 1.5px dashed var(--hex-border-strong);
	border-radius: 14px;
	background: var(--hex-bg-page);
	color: var(--hex-text-secondary);
	font-size: 13px;
	text-align: center;
}

#hex-school-quiz-form .hex-quiz-question-card {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-right: 4px solid var(--hex-primary);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.04 );
	transition: box-shadow 0.2s ease;
}

#hex-school-quiz-form .hex-quiz-question-card:hover {
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.08 );
}

#hex-school-quiz-form .hex-quiz-question-card-header {
	margin-bottom: 12px;
}

#hex-school-quiz-form .hex-quiz-question-number {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: 999px;
	background: rgba( 22, 160, 133, 0.1 );
	color: var(--hex-primary-dark);
	font-size: 12px;
	font-weight: 700;
}

#hex-school-quiz-form .hex-quiz-remove-question-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

#hex-school-quiz-form .hex-quiz-question-card > .hex-exam-field textarea {
	background: var(--hex-bg-page);
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	transition: border-color 0.18s ease, background 0.18s ease;
}

#hex-school-quiz-form .hex-quiz-question-card > .hex-exam-field textarea:focus {
	background: var(--hex-bg-card);
}

#hex-school-quiz-form .hex-quiz-options-grid {
	gap: 10px 14px;
	margin-top: 12px;
}

#hex-school-quiz-form .hex-quiz-option-field {
	margin-bottom: 0;
	padding: 10px 12px;
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	transition: border-color 0.18s ease, background 0.18s ease;
}

#hex-school-quiz-form .hex-quiz-option-field:has( input[type="radio"]:checked ) {
	border-color: var(--hex-primary);
	background: rgba( 22, 160, 133, 0.07 );
}

#hex-school-quiz-form .hex-quiz-option-field label {
	margin-bottom: 6px;
	cursor: pointer;
}

#hex-school-quiz-form .hex-quiz-option-field input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--hex-primary);
	cursor: pointer;
}

#hex-school-quiz-form .hex-quiz-option-field input[type="text"] {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-strong);
	border-radius: 8px;
}

#hex-school-quiz-form .hex-quiz-option-field input[type="text"]:focus {
	border-color: var(--hex-primary);
}

#hex-school-quiz-form .hex-quiz-option-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 8px 12px;
	border: 1px solid var(--hex-color-warning);
	border-radius: 8px;
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
	font-size: 11.5px;
}

#hex-school-quiz-form .hex-exam-form-actions {
	margin-top: 22px;
	padding-top: 18px;
}

/* پالت تیره — فرم افزودن/ویرایش «آزمون تستی»: متن ورودی همه‌ی فیلدها
   (عنوان آزمون، درس، مدت زمان، متن سوال، متن گزینه‌ها) سفید شود. */
[data-hex-theme="dark"] #hex-school-quiz-form .hex-exam-field select,
[data-hex-theme="dark"] #hex-school-quiz-form .hex-exam-field input[type="text"],
[data-hex-theme="dark"] #hex-school-quiz-form .hex-exam-field input[type="number"],
[data-hex-theme="dark"] #hex-school-quiz-form .hex-quiz-question-card > .hex-exam-field textarea,
[data-hex-theme="dark"] #hex-school-quiz-form .hex-quiz-option-field input[type="text"] {
	color: #ffffff;
}

[data-hex-theme="dark"] #hex-school-quiz-form .hex-exam-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-left: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}

[data-hex-theme="dark"] #hex-school-quiz-form .hex-exam-field select option {
	color: #0f172a;
}

[data-hex-theme="dark"] #hex-school-quiz-form .hex-exam-field input::placeholder,
[data-hex-theme="dark"] #hex-school-quiz-form .hex-quiz-question-card > .hex-exam-field textarea::placeholder,
[data-hex-theme="dark"] #hex-school-quiz-form .hex-quiz-option-field input[type="text"]::placeholder {
	color: var(--hex-text-muted);
}

@media ( max-width: 640px ) {

	#hex-school-quiz-form {
		padding: 16px;
	}

	.hex-exam-form-card:has( #hex-school-quiz-form ) .hex-exam-form-title {
		padding: 16px 18px;
		font-size: 15px;
	}

	#hex-school-quiz-form .hex-exam-form-grid {
		padding: 14px 14px 2px;
	}

	#hex-school-quiz-form .hex-exam-form-actions {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	#hex-school-quiz-form .hex-exam-form-actions .hex-school-btn {
		flex: 1 1 0;
		text-align: center;
		justify-content: center;
	}
}

/* ========== بخش «آزمون تشریحی»: فرم افزودن/ویرایش - سوالات (فاز ۲-ج) ========== */
/* سازنده‌ی سوالات این فرم از همان کلاس‌های عمومی بالا (.hex-quiz-question-card و
   مشتقاتش) استفاده می‌کند؛ اینجا فقط استایل اختصاصی فیلد «حداکثر نمره» (جایگزین
   گرید گزینه‌های آزمون تستی) اضافه می‌شود. */

.hex-essay-exam-max-score-field {
	max-width: 160px;
}

#hex-essay-exam-question-template {
	display: none;
}

@media ( max-width: 640px ) {

	.hex-quiz-options-grid {
		grid-template-columns: 1fr;
	}
}

/* ========== بازطراحی مدرن فرم «افزودن/ویرایش آزمون» در بخش «آزمون تشریحی» ==========
   دقیقاً هم‌راستا با بازطراحی فرم آزمون تستی (بالاتر)؛ فقط به فرم ساخت/ویرایش
   آزمون تشریحی (#hex-school-essay-exam-form) و کارت بیرونی آن اختصاص دارد تا
   روی فرم‌های مشابه (برنامه امتحانی، آزمون تستی) اثر نگذارد. */

.hex-exam-form-card:has( #hex-school-essay-exam-form ) {
	max-width: 820px;
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 22px rgba( 15, 23, 42, 0.07 );
}

.hex-exam-form-card:has( #hex-school-essay-exam-form ) .hex-exam-form-title {
	margin: 0;
	padding: 20px 24px;
	background: linear-gradient( 135deg, rgba( var(--hex-primary-rgb), 0.09 ), rgba( var(--hex-primary-rgb), 0.02 ) );
	border-bottom: 1px solid var(--hex-border);
	font-size: 17px;
}

.hex-exam-form-card:has( #hex-school-essay-exam-form ) .hex-exam-form-title .hex-icon {
	width: 34px;
	height: 34px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--hex-primary);
	color: var(--hex-text-on-primary);
}

#hex-school-essay-exam-form {
	display: block;
	padding: 24px;
}

#hex-school-essay-exam-form .hex-exam-form-grid {
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	padding: 18px 20px 6px;
	margin-bottom: 26px;
}

#hex-school-essay-exam-form .hex-exam-field label {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

#hex-school-essay-exam-form .hex-exam-field select,
#hex-school-essay-exam-form .hex-exam-field input[type="text"],
#hex-school-essay-exam-form .hex-exam-field input[type="number"] {
	background: var(--hex-bg-card);
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	padding: 10px 12px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#hex-school-essay-exam-form .hex-exam-field select:focus,
#hex-school-essay-exam-form .hex-exam-field input:focus {
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 4px rgba( 22, 160, 133, 0.12 );
}

#hex-school-essay-exam-form .hex-quiz-questions {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

#hex-school-essay-exam-form .hex-quiz-questions-header {
	margin-bottom: 16px;
}

#hex-school-essay-exam-form .hex-quiz-questions-header h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
}

#hex-school-essay-exam-form .hex-quiz-questions-header h4::before {
	content: '';
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--hex-primary);
}

#hex-school-essay-exam-form .hex-essay-exam-add-question-btn {
	padding: 9px 18px;
	border: 1.5px dashed var(--hex-primary);
	border-radius: 999px;
	background: rgba( var(--hex-primary-rgb), 0.06 );
	color: var(--hex-primary-dark);
	font-weight: 700;
	transition: background 0.18s ease, color 0.18s ease;
}

#hex-school-essay-exam-form .hex-essay-exam-add-question-btn:hover {
	background: var(--hex-primary);
	border-style: solid;
	color: var(--hex-text-on-primary);
}

#hex-school-essay-exam-form .hex-quiz-no-questions {
	padding: 30px 16px;
	border: 1.5px dashed var(--hex-border-strong);
	border-radius: 14px;
	background: var(--hex-bg-page);
	color: var(--hex-text-secondary);
	font-size: 13px;
	text-align: center;
}

#hex-school-essay-exam-form .hex-quiz-question-card {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-right: 4px solid var(--hex-primary);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.04 );
	transition: box-shadow 0.2s ease;
}

#hex-school-essay-exam-form .hex-quiz-question-card:hover {
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.08 );
}

#hex-school-essay-exam-form .hex-quiz-question-card-header {
	margin-bottom: 12px;
}

#hex-school-essay-exam-form .hex-quiz-question-number {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: 999px;
	background: rgba( var(--hex-primary-rgb), 0.1 );
	color: var(--hex-primary-dark);
	font-size: 12px;
	font-weight: 700;
}

#hex-school-essay-exam-form .hex-quiz-remove-question-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

#hex-school-essay-exam-form .hex-quiz-question-card > .hex-exam-field textarea {
	background: var(--hex-bg-page);
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	transition: border-color 0.18s ease, background 0.18s ease;
}

#hex-school-essay-exam-form .hex-quiz-question-card > .hex-exam-field textarea:focus {
	background: var(--hex-bg-card);
}

#hex-school-essay-exam-form .hex-essay-exam-max-score-field {
	margin-top: 12px;
	padding: 10px 12px;
	max-width: 220px;
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
}

#hex-school-essay-exam-form .hex-essay-exam-max-score-field label {
	margin-bottom: 6px;
}

#hex-school-essay-exam-form .hex-essay-exam-max-score-field input[type="number"] {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-strong);
	border-radius: 8px;
}

#hex-school-essay-exam-form .hex-essay-exam-max-score-field input[type="number"]:focus {
	border-color: var(--hex-primary);
}

#hex-school-essay-exam-form .hex-exam-form-actions {
	margin-top: 22px;
	padding-top: 18px;
}

@media ( max-width: 640px ) {

	#hex-school-essay-exam-form {
		padding: 16px;
	}

	.hex-exam-form-card:has( #hex-school-essay-exam-form ) .hex-exam-form-title {
		padding: 16px 18px;
		font-size: 15px;
	}

	#hex-school-essay-exam-form .hex-exam-form-grid {
		padding: 14px 14px 2px;
	}

	#hex-school-essay-exam-form .hex-essay-exam-max-score-field {
		max-width: 100%;
	}

	#hex-school-essay-exam-form .hex-exam-form-actions {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	#hex-school-essay-exam-form .hex-exam-form-actions .hex-school-btn {
		flex: 1 1 0;
		text-align: center;
		justify-content: center;
	}
}

/* کلاس کمکی برای برچسب‌هایی که فقط برای صفحه‌خوان‌ها لازم است و نباید در
   ظاهر بصری نمایش داده شوند (مثلاً برچسب انتخاب‌گر «نوع سوال» که کنار
   خودِ select به‌اندازه کافی واضح است). */
.hex-school-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ========== بازطراحی مدرن فرم «افزودن/ویرایش آزمون» در بخش «آزمون جامع» (فاز ۷) ==========
   دقیقاً هم‌راستا با بازطراحی فرم آزمون تستی/تشریحی (بالاتر)؛ فقط به فرم
   ساخت/ویرایش آزمون جامع (#hex-school-combined-exam-form) و کارت بیرونی
   آن اختصاص دارد. تفاوت اصلی نسبت به فرم آزمون تشریحی: هر ردیف سوال یک
   انتخاب‌گر «نوع سوال» در هدر کارت دارد (.hex-combined-question-type-field)
   و فیلدهای گزینه‌های چهارگانه (.hex-combined-mcq-fields) بر اساس نوع
   انتخاب‌شده نمایش/مخفی می‌شوند (JS). */

.hex-exam-form-card:has( #hex-school-combined-exam-form ) {
	max-width: 820px;
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 22px rgba( 15, 23, 42, 0.07 );
}

.hex-exam-form-card:has( #hex-school-combined-exam-form ) .hex-exam-form-title {
	margin: 0;
	padding: 20px 24px;
	background: linear-gradient( 135deg, rgba( 22, 160, 133, 0.09 ), rgba( 26, 188, 156, 0.02 ) );
	border-bottom: 1px solid var(--hex-border);
	font-size: 17px;
}

.hex-exam-form-card:has( #hex-school-combined-exam-form ) .hex-exam-form-title .hex-icon {
	width: 34px;
	height: 34px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--hex-primary);
	color: var(--hex-text-on-primary);
}

#hex-school-combined-exam-form {
	display: block;
	padding: 24px;
}

#hex-school-combined-exam-form .hex-exam-form-grid {
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	padding: 18px 20px 6px;
	margin-bottom: 26px;
}

#hex-school-combined-exam-form .hex-exam-field label {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

#hex-school-combined-exam-form .hex-exam-field select,
#hex-school-combined-exam-form .hex-exam-field input[type="text"],
#hex-school-combined-exam-form .hex-exam-field input[type="number"] {
	background: var(--hex-bg-card);
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	padding: 10px 12px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#hex-school-combined-exam-form .hex-exam-field select:focus,
#hex-school-combined-exam-form .hex-exam-field input:focus {
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 4px rgba( 22, 160, 133, 0.12 );
}

#hex-school-combined-exam-form .hex-quiz-questions {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

#hex-school-combined-exam-form .hex-quiz-questions-header {
	margin-bottom: 16px;
}

#hex-school-combined-exam-form .hex-quiz-questions-header h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
}

#hex-school-combined-exam-form .hex-quiz-questions-header h4::before {
	content: '';
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--hex-primary);
}

#hex-school-combined-exam-form .hex-combined-exam-add-question-btn {
	padding: 9px 18px;
	border: 1.5px dashed var(--hex-primary);
	border-radius: 999px;
	background: rgba( 22, 160, 133, 0.06 );
	color: var(--hex-primary-dark);
	font-weight: 700;
	transition: background 0.18s ease, color 0.18s ease;
}

#hex-school-combined-exam-form .hex-combined-exam-add-question-btn:hover {
	background: var(--hex-primary);
	border-style: solid;
	color: var(--hex-text-on-primary);
}

#hex-school-combined-exam-form .hex-quiz-no-questions {
	padding: 30px 16px;
	border: 1.5px dashed var(--hex-border-strong);
	border-radius: 14px;
	background: var(--hex-bg-page);
	color: var(--hex-text-secondary);
	font-size: 13px;
	text-align: center;
}

#hex-school-combined-exam-form .hex-quiz-question-card {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	border-right: 4px solid var(--hex-primary);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 14px;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.04 );
	transition: box-shadow 0.2s ease;
}

#hex-school-combined-exam-form .hex-quiz-question-card:hover {
	box-shadow: 0 6px 18px rgba( 15, 23, 42, 0.08 );
}

#hex-school-combined-exam-form .hex-quiz-question-card-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

#hex-school-combined-exam-form .hex-quiz-question-number {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: 999px;
	background: rgba( 22, 160, 133, 0.1 );
	color: var(--hex-primary-dark);
	font-size: 12px;
	font-weight: 700;
}

#hex-school-combined-exam-form .hex-combined-question-type-field {
	margin: 0 0 0 auto;
	flex: 0 0 auto;
}

#hex-school-combined-exam-form .hex-combined-question-type-select {
	background: var(--hex-bg-card);
	border: 1.5px solid var(--hex-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hex-btn-secondary-text);
	transition: border-color 0.18s ease;
}

#hex-school-combined-exam-form .hex-combined-question-type-select:focus {
	border-color: var(--hex-primary);
}

#hex-school-combined-exam-form .hex-quiz-remove-question-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	flex: 0 0 auto;
}

#hex-school-combined-exam-form .hex-quiz-question-card > .hex-exam-field textarea {
	background: var(--hex-bg-page);
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	transition: border-color 0.18s ease, background 0.18s ease;
}

#hex-school-combined-exam-form .hex-quiz-question-card > .hex-exam-field textarea:focus {
	background: var(--hex-bg-card);
}

#hex-school-combined-exam-form .hex-combined-mcq-fields.hex-quiz-options-grid {
	margin-top: 4px;
}

#hex-school-combined-exam-form .hex-combined-max-score-field {
	margin-top: 12px;
	padding: 10px 12px;
	max-width: 220px;
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
}

#hex-school-combined-exam-form .hex-combined-max-score-field label {
	margin-bottom: 6px;
}

#hex-school-combined-exam-form .hex-combined-max-score-field input[type="number"] {
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-strong);
	border-radius: 8px;
}

#hex-school-combined-exam-form .hex-combined-max-score-field input[type="number"]:focus {
	border-color: var(--hex-primary);
}

#hex-school-combined-exam-form .hex-exam-form-actions {
	margin-top: 22px;
	padding-top: 18px;
}

@media ( max-width: 640px ) {

	#hex-school-combined-exam-form {
		padding: 16px;
	}

	.hex-exam-form-card:has( #hex-school-combined-exam-form ) .hex-exam-form-title {
		padding: 16px 18px;
		font-size: 15px;
	}

	#hex-school-combined-exam-form .hex-exam-form-grid {
		padding: 14px 14px 2px;
	}

	#hex-school-combined-exam-form .hex-quiz-question-card-header {
		gap: 8px;
	}

	#hex-school-combined-exam-form .hex-combined-question-type-field {
		margin: 0;
		flex: 1 1 100%;
		order: 3;
	}

	#hex-school-combined-exam-form .hex-combined-question-type-select {
		width: 100%;
	}

	#hex-school-combined-exam-form .hex-quiz-options-grid {
		grid-template-columns: 1fr;
	}

	#hex-school-combined-exam-form .hex-combined-max-score-field {
		max-width: 100%;
	}

	#hex-school-combined-exam-form .hex-exam-form-actions {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	#hex-school-combined-exam-form .hex-exam-form-actions .hex-school-btn {
		flex: 1 1 0;
		text-align: center;
		justify-content: center;
	}
}

/* ============ بخش «آزمون تشریحی»: تصحیح دستی پاسخ‌ها (فاز ۴) ============ */

.hex-essay-exam-grade-answer {
	margin: 10px 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border);
}

.hex-essay-exam-grade-answer-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--hex-text-secondary);
}

.hex-essay-exam-grade-answer-text {
	margin: 0;
	font-size: 13.5px;
	color: var(--hex-btn-secondary-text);
	line-height: 1.9;
	white-space: pre-line;
}

.hex-essay-exam-grade-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 10px;
	padding: 14px 16px;
	background: var(--hex-bg-page);
	border: 1px solid var(--hex-border-light);
	border-radius: 12px;
}

.hex-essay-exam-grade-fields .hex-essay-exam-max-score-field {
	max-width: 160px;
}

.hex-essay-exam-grade-fields .hex-exam-field-full {
	flex: 1 1 100%;
}

.hex-essay-exam-grade-fields .hex-exam-field {
	margin: 0;
}

.hex-essay-exam-grade-fields .hex-exam-field label {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

.hex-essay-exam-grade-fields .hex-exam-field input[type="number"],
.hex-essay-exam-grade-fields .hex-exam-field textarea {
	background: var(--hex-bg-card);
	border: 1.5px solid var(--hex-border);
	border-radius: 10px;
	padding: 10px 12px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.hex-essay-exam-grade-fields .hex-exam-field input[type="number"]:focus,
.hex-essay-exam-grade-fields .hex-exam-field textarea:focus {
	outline: none;
	border-color: var(--hex-primary);
	box-shadow: 0 0 0 4px rgba( var(--hex-primary-rgb), 0.12 );
}

/* پالت تیره — فیلدهای «نمره» و «بازخورد» در بخش تصحیح آزمون (تشریحی/جامع):
   متن ورودی و placeholder سفید/روشن شود تا مثل بقیه فیلدهای مدرن پلاگین
   در تم تاریک هم واضح خوانده شود. */
[data-hex-theme="dark"] .hex-essay-exam-grade-fields .hex-exam-field input[type="number"],
[data-hex-theme="dark"] .hex-essay-exam-grade-fields .hex-exam-field textarea {
	color: #ffffff;
}

[data-hex-theme="dark"] .hex-essay-exam-grade-fields .hex-exam-field input::placeholder,
[data-hex-theme="dark"] .hex-essay-exam-grade-fields .hex-exam-field textarea::placeholder {
	color: var(--hex-text-muted);
}

@media ( max-width: 640px ) {

	.hex-essay-exam-grade-fields {
		flex-direction: column;
	}

	.hex-essay-exam-grade-fields .hex-essay-exam-max-score-field {
		max-width: 100%;
	}
}

/* ============ بخش «آزمون تشریحی»: پیوست عکس به پاسخ دانش‌آموز ============ */

.hex-essay-exam-answer-image-field {
	margin-top: -4px;
}

.hex-essay-exam-answer-image-label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hex-text-secondary);
}

.hex-essay-exam-answer-image-label .hex-icon {
	width: 15px;
	height: 15px;
}

.hex-essay-exam-answer-image-input {
	display: block;
	width: 100%;
	font-size: 13px;
}

.hex-essay-exam-answer-image-hint {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
}

.hex-essay-exam-answer-images-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.hex-essay-exam-answer-image-thumb-link {
	display: block;
	line-height: 0;
}

.hex-essay-exam-answer-image-thumb {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--hex-border);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hex-essay-exam-answer-image-thumb:hover {
	transform: scale(1.04);
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15);
}

/* ============ بخش «آزمون تشریحی»: نمایش نتیجه به دانش‌آموز/والدین (فاز ۵) ============ */

.hex-essay-exam-result-feedback {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-essay-exam-result-feedback .hex-essay-exam-grade-answer-label {
	color: var(--hex-primary-dark);
}

.hex-essay-exam-result-score-badge {
	background: var(--hex-color-info-bg);
	color: var(--hex-color-info);
}

/* ================= بخش «آزمون»: نمای شرکت دانش‌آموز (فاز ۳) ================= */

.hex-quiz-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-quiz-status-badge.hex-quiz-status-not-started {
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
}

.hex-quiz-status-badge.hex-quiz-status-in-progress {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
}

.hex-quiz-status-badge.hex-quiz-status-submitted {
	background: var(--hex-color-success-bg);
	color: var(--hex-color-success-light);
}

.hex-quiz-status-badge.hex-quiz-status-expired {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

/* ================= بخش «آزمون جامع»: نمای شرکت دانش‌آموز (فاز ۳-۳) ================= */

.hex-combined-question-header-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hex-combined-question-type-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-combined-question-type-badge.hex-combined-question-type-mcq {
	background: var(--hex-bg-soft);
	color: var(--hex-text-secondary);
}

.hex-combined-question-type-badge.hex-combined-question-type-essay {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
}

.hex-combined-grade-mcq-options {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hex-combined-grade-mcq-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 10px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	font-size: 13.5px;
	color: var(--hex-btn-secondary-text);
}

.hex-combined-grade-mcq-option-correct {
	background: var(--hex-color-success-bg);
	border-color: var(--hex-color-success);
	color: var(--hex-color-success);
	font-weight: 600;
}

.hex-combined-grade-mcq-option-wrong {
	background: var(--hex-color-error-bg);
	border-color: var(--hex-color-error);
	color: var(--hex-color-error);
	font-weight: 600;
}

.hex-quiz-start-form {
	display: inline-block;
	margin: 0;
}

.hex-quiz-start-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	white-space: nowrap;
}

/* --- کارت «شرکت در آزمون»: هدر همراه با تایمر --- */

.hex-quiz-take-card {
	max-width: 720px;
	margin: 0 auto;
}

.hex-quiz-take-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.hex-quiz-take-header .hex-exam-form-title {
	margin: 0;
}

.hex-quiz-timer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 10px;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
	font-weight: 700;
	font-size: 15px;
	border: 1px solid var(--hex-primary-light);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hex-quiz-timer .hex-icon {
	width: 16px;
	height: 16px;
}

.hex-quiz-timer.hex-quiz-timer-low {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
	border-color: var(--hex-color-warning);
}

.hex-quiz-timer.hex-quiz-timer-expired {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
	border-color: var(--hex-color-error);
}

.hex-quiz-timer-value {
	direction: ltr;
	font-variant-numeric: tabular-nums;
}

.hex-quiz-take-hint {
	margin: 10px 0 16px;
	font-size: 12.5px;
	color: var(--hex-text-secondary);
	line-height: 1.9;
}

.hex-quiz-take-question-card {
	cursor: default;
}

.hex-quiz-take-question-text {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--hex-text-primary);
	line-height: 1.9;
}

.hex-quiz-take-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hex-quiz-take-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 10px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	cursor: pointer;
	font-size: 13.5px;
	color: var(--hex-btn-secondary-text);
	transition: background 0.12s ease, border-color 0.12s ease;
}

.hex-quiz-take-option:hover {
	background: var(--hex-primary-soft);
	border-color: var(--hex-primary-light);
}

.hex-quiz-take-option input[type="radio"] {
	accent-color: var(--hex-primary-light);
	flex: 0 0 auto;
}

.hex-quiz-take-option-text {
	flex: 1 1 auto;
}

.hex-quiz-done-card {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.hex-quiz-done-card .hex-exam-form-title {
	justify-content: center;
}

.hex-quiz-done-card p {
	color: var(--hex-text-secondary);
	font-size: 13.5px;
	line-height: 1.9;
	margin-bottom: 16px;
}

@media ( max-width: 640px ) {

	.hex-quiz-take-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.hex-quiz-timer {
		align-self: stretch;
		justify-content: center;
	}
}

/* ================= بخش «آزمون»: نمای نتیجه‌ی آزمون (فاز ۴) ================= */

.hex-quiz-result-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	white-space: nowrap;
}

.hex-quiz-result-card {
	max-width: 720px;
	margin: 0 auto;
}

.hex-quiz-result-student {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hex-btn-secondary-text);
}

.hex-quiz-result-student .hex-icon {
	width: 15px;
	height: 15px;
}

.hex-quiz-result-status {
	margin: 6px 0 16px;
	font-size: 13px;
	color: var(--hex-text-secondary);
	line-height: 1.9;
}

.hex-quiz-result-score {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--hex-primary-soft);
	border: 1px solid var(--hex-primary-light);
	margin-bottom: 20px;
}

.hex-quiz-result-score-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--hex-primary-dark);
}

.hex-quiz-result-score-percent {
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-primary-dark);
	direction: ltr;
}

[data-hex-theme="dark"] .hex-quiz-result-score-value,
[data-hex-theme="dark"] .hex-quiz-result-score-percent {
	color: var(--hex-primary-light);
}

.hex-quiz-result-questions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 20px;
}

.hex-quiz-result-question-card {
	border-right: 3px solid var(--hex-border-strong);
}

.hex-quiz-result-question-correct {
	border-right-color: var(--hex-color-success);
}

.hex-quiz-result-question-wrong {
	border-right-color: var(--hex-color-error);
}

.hex-quiz-result-question-unanswered {
	border-right-color: var(--hex-color-warning);
}

.hex-quiz-result-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.hex-quiz-result-badge-correct {
	background: var(--hex-color-success-bg);
	color: var(--hex-color-success-light);
}

.hex-quiz-result-badge-wrong {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
}

.hex-quiz-result-badge-unanswered {
	background: var(--hex-color-warning-bg);
	color: var(--hex-color-warning);
}

.hex-quiz-result-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 10px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border);
	font-size: 13.5px;
	color: var(--hex-btn-secondary-text);
}

.hex-quiz-result-option-correct {
	background: var(--hex-color-success-bg);
	border-color: var(--hex-color-success);
	color: var(--hex-color-success);
	font-weight: 600;
}

.hex-quiz-result-option-wrong {
	background: var(--hex-color-error-bg);
	border-color: var(--hex-color-error);
	color: var(--hex-color-error);
	font-weight: 600;
}

/* ================= بخش «آزمون»: گزارش نتایج (فاز ۵) ================= */

.hex-quiz-report-card {
	max-width: 860px;
	margin: 0 auto;
}

.hex-quiz-report-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: 10px;
	margin: 14px 0 22px;
}

.hex-quiz-report-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 14px 10px;
	border-radius: 12px;
	background: var(--hex-primary-soft);
	border: 1px solid var(--hex-primary-light);
	text-align: center;
}

.hex-quiz-report-stat-highest {
	background: var(--hex-color-success-bg);
	border-color: var(--hex-color-success);
}

.hex-quiz-report-stat-lowest {
	background: var(--hex-color-error-bg);
	border-color: var(--hex-color-error);
}

.hex-quiz-report-stat-pass {
	background: var(--hex-color-info-bg);
	border-color: var(--hex-color-info);
}

.hex-quiz-report-stat-pending {
	background: var(--hex-color-warning-bg);
	border-color: var(--hex-color-warning);
}

.hex-quiz-report-stat-num {
	font-size: 18px;
	font-weight: 700;
	color: var(--hex-primary-dark);
}

.hex-quiz-report-stat-highest .hex-quiz-report-stat-num {
	color: var(--hex-color-success);
}

.hex-quiz-report-stat-lowest .hex-quiz-report-stat-num {
	color: var(--hex-color-error);
}

.hex-quiz-report-stat-pass .hex-quiz-report-stat-num {
	color: var(--hex-color-info);
}

.hex-quiz-report-stat-pending .hex-quiz-report-stat-num {
	color: var(--hex-color-warning);
}

.hex-quiz-report-stat-label {
	font-size: 11.5px;
	color: var(--hex-text-secondary);
}

/* ================= بخش «آزمون»: برچسب قبول/مردود (فاز ۶) ================= */

.hex-quiz-pass-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
}

.hex-quiz-result-card > .hex-quiz-pass-badge {
	display: flex;
	width: fit-content;
	margin: -8px auto 18px;
}

.hex-quiz-pass-badge .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-quiz-pass-badge-pass {
	background: var(--hex-color-success-bg);
	color: var(--hex-color-success);
	border: 1px solid var(--hex-color-success);
}

.hex-quiz-pass-badge-fail {
	background: var(--hex-color-error-bg);
	color: var(--hex-color-error);
	border: 1px solid var(--hex-color-error);
}

.hex-quiz-result-hidden-notice {
	margin-top: 10px;
}

.hex-settings-quiz-toggle {
	display: flex;
	width: 100%;
	margin-bottom: 6px;
}

/* ================= بخش «آزمون»: استایل موبایل تکمیلی (فاز ۶) ================= */

@media ( max-width: 640px ) {

	.hex-quiz-report-stats {
		grid-template-columns: repeat( 2, 1fr );
	}

	.hex-quiz-take-take-form .hex-school-form-actions,
	.hex-quiz-form .hex-school-form-actions {
		flex-direction: column;
	}

	.hex-quiz-questions-header {
		flex-wrap: wrap;
		gap: 8px;
	}

	.hex-quiz-report-card table.hex-classes-table td[data-label],
	.hex-quiz-report-card table.hex-classes-table th {
		white-space: nowrap;
	}
}

@media ( max-width: 420px ) {

	.hex-quiz-report-stats {
		grid-template-columns: 1fr 1fr;
	}

	.hex-quiz-result-score-value {
		font-size: 20px;
	}

	.hex-quiz-timer {
		font-size: 15px;
	}
}

/* ============ بخش «آزمون تشریحی»: تنظیمات و صیقل نهایی موبایل (فاز ۷) ============ */

@media ( max-width: 640px ) {

	.hex-essay-exam-grade-fields {
		grid-template-columns: 1fr;
	}

	.hex-essay-exam-grade-answer {
		padding: 8px 10px;
	}

	.hex-essay-exam-grade-answer-text {
		font-size: 13px;
	}

	.hex-essay-exam-result-score-badge {
		white-space: nowrap;
	}
}

@media ( max-width: 420px ) {

	.hex-essay-exam-max-score-field {
		max-width: 100%;
	}

	.hex-quiz-question-card-header {
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* ============ فاز ۴ PWA: بنر/راهنمای نصب برنامه ============
   دو نوع بنر: «نصب» (اندروید/دسکتاپ، با دکمه‌ی واقعی نصب) و «راهنما»
   (iOS، چون Safari از beforeinstallprompt پشتیبانی نمی‌کند و فقط راهنمای
   دستی «افزودن به صفحه اصلی» نمایش داده می‌شود). هر دو یک نوار پایین‌چسب
   با همان زبان بصری دکمه‌های برند افزونه (hex-school-btn-primary) هستند و
   با کلاس is-visible (توسط pwa-install.js) نمایان می‌شوند. */
.hex-school-pwa-install-banner {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	/* عمداً پایین‌تر از z-index پاپ‌آپ‌های پنل (100000: تأیید خروج، جزئیات
	   گزارش/دانش‌آموز، آزمون جدید و...) نگه داشته شده تا اگر همزمان با نمایش
	   این بنر یک پاپ‌آپ باز شود، پاپ‌آپ همیشه روی بنر دیده شود، نه برعکس. */
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--hex-bg-card);
	color: var(--hex-text-primary);
	border: 1px solid var(--hex-border);
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
	padding: 14px 16px;
	max-width: 420px;
	margin: 0 auto;
	transform: translateY(120%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.hex-school-pwa-install-banner.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.hex-school-pwa-install-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--hex-primary-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hex-school-pwa-install-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hex-school-pwa-install-body {
	flex: 1 1 auto;
	min-width: 0;
}

.hex-school-pwa-install-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--hex-text-primary);
	margin: 0 0 2px;
}

.hex-school-pwa-install-desc {
	font-size: 12px;
	color: var(--hex-text-secondary);
	margin: 0;
	line-height: 1.7;
}

.hex-school-pwa-install-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.hex-school-pwa-install-btn {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	outline: 0;
	background: var(--hex-gradient-primary);
	color: var(--hex-text-on-primary);
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* بدون این override، حالت‌های hover/focus/active ممکن است رنگ پیش‌فرض
   مرورگر/قالب (اغلب قرمز) را به‌جای گرادیان اصلی دکمه نشان دهند. */
.hex-school-pwa-install-btn:hover,
.hex-school-pwa-install-btn:focus,
.hex-school-pwa-install-btn:focus-visible,
.hex-school-pwa-install-btn:active {
	background: linear-gradient(135deg, var(--hex-primary), var(--hex-primary-dark));
	color: var(--hex-text-on-primary);
	outline: 0;
}

.hex-school-pwa-install-dismiss {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	background: none;
	color: var(--hex-text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	outline: 0;
	-webkit-tap-highlight-color: transparent;
}

.hex-school-pwa-install-dismiss:hover,
.hex-school-pwa-install-dismiss:focus,
.hex-school-pwa-install-dismiss:focus-visible,
.hex-school-pwa-install-dismiss:active {
	background: none;
	color: var(--hex-text-muted);
	outline: 0;
}

/* راهنمای دستی iOS: به‌جای دکمه‌ی نصب، مراحل «اشتراک‌گذاری ← افزودن به
   صفحه اصلی» را نشان می‌دهد؛ چون هیچ API‌ای برای نصب برنامه‌ای در Safari
   وجود ندارد. */
.hex-school-pwa-install-steps {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--hex-text-secondary);
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hex-school-pwa-install-steps li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hex-school-pwa-install-steps .hex-school-pwa-install-step-num {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hex-primary-soft);
	color: var(--hex-primary-dark);
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 480px) {
	.hex-school-pwa-install-banner {
		max-width: none;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.hex-school-pwa-install-actions {
		width: 100%;
		justify-content: flex-end;
	}
}

/* ======================================================================
   فاز ۸ — صفحه اصلی سایت (شورت‌کد [hex_school_homepage]): استایل کامل
   ======================================================================
   ساختار HTML/PHP این صفحه (هدر+اسلایدر، مقالات، آمار، همکاری‌با‌ما+فرم،
   فوتر) در فازهای ۱ تا ۷ کامل شده بود. این بخش استایل ریسپانسیو کامل آن
   را، دقیقاً بر پایه‌ی همان توکن‌های رنگی پنل (--hex-*) تعریف می‌کند تا با
   هر پالت فعال (روشن سبز/آبی/تیره) هماهنگ باشد. چون این شورت‌کد برای
   بازدیدکننده‌ی مهمان هم رندر می‌شود، ویژگی‌های data-hex-theme/
   data-hex-accent روی خودِ wrapper اصلی (.hex-homepage) قرار می‌گیرند
   (نه فقط .hex-school-frontend-panel)، بنابراین توکن‌های رنگیِ سراسری
   بدون نیاز به ورود کاربر هم به‌درستی اعمال می‌شوند. */

.hex-homepage {
	direction: rtl;
	text-align: right;
	font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
	background: var(--hex-bg-page);
	color: var(--hex-text-primary);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( -50vw + 50% );
	margin-right: calc( -50vw + 50% );
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.hex-homepage .hex-icon {
	display: block;
	flex-shrink: 0;
}

/* لینک‌های صفحه اصلی (لوگو هدر، دکمه ورود به پنل، کارت مقالات، اسلایدر و ...)
   نباید خط زیر متن (underline) پیش‌فرض مرورگر/قالب را داشته باشند؛ این قانون
   با اولویت بالا (!important) تعریف شده تا استایل پیش‌فرض لینک در قالب سایت
   (که ممکن است بعد از CSS این افزونه بارگذاری شود) آن را override نکند. */
.hex-homepage a,
.hex-homepage a:hover,
.hex-homepage a:focus,
.hex-homepage a:active,
.hex-homepage a:visited {
	text-decoration: none !important;
}

.hex-homepage img {
	max-width: 100%;
	display: block;

}

/* ---------- هدر ---------- */
/* از position:fixed استفاده شده (نه sticky): چون خودِ ".hex-homepage" روی
   overflow-x:hidden تنظیم شده، این کانتینر طبق رفتار استاندارد مرورگرها
   یک «scroll container» محسوب می‌شود و sticky داخل آن (به‌جای صفحه) نسبت
   به همین کانتینر محاسبه و عملاً بی‌اثر می‌شود؛ fixed این وابستگی را ندارد
   و همیشه نسبت به viewport ثابت می‌ماند. چون fixed از جریان عادی صفحه خارج
   می‌شود، بلافاصله بعد از هدر یک spacer قرار گرفته (در JS، ارتفاعش برابر
   با ارتفاع واقعی هدر تنظیم می‌شود) تا محتوای زیرش زیر هدر پنهان نشود. */
.hex-homepage-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	z-index: 40;
	background: var(--hex-bg-header);
	border-bottom: 1px solid var(--hex-border-light);
	box-shadow: 0 2px 12px -6px rgba(15, 23, 42, 0.08);
}

/* جایگزین ارتفاع هدر در جریان عادی صفحه، چون خودِ هدر fixed است و از
   جریان صفحه خارج شده؛ ارتفاعش را جاوااسکریپت هنگام لود و resize محاسبه
   و ست می‌کند. */
.hex-homepage-header-spacer {
	width: 100%;
}

/* نوار باریک گرادیانی بالای هدر: اولین چیزی که کاربر می‌بیند رنگ برند
   سایت را نشان می‌دهد. */
.hex-homepage-header::before {
	content: '';
	display: block;
	height: 3px;
	background: var(--hex-gradient-primary);
}

.hex-homepage-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
}

.hex-homepage-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.hex-homepage-logo-image {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	object-fit: contain;
	flex-shrink: 0;
}

.hex-homepage-logo-text {
	font-size: 19px;
	font-weight: 700;
	background: var(--hex-gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--hex-text-heading);
}

.hex-homepage-header-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--hex-gradient-primary);
	color: var(--hex-text-on-primary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 6px 16px -4px rgba(var(--hex-primary-rgb), 0.4);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hex-homepage-header-btn:hover {
	box-shadow: 0 8px 20px -4px rgba(var(--hex-primary-rgb), 0.5);
	transform: translateY(-1px);
	color: var(--hex-text-on-primary);
}

.hex-homepage-header-btn .hex-icon {
	width: 16px;
	height: 16px;
}

/* ---------- اطلاعیه‌ها ---------- */
/* اسکرولی افقی (مثل بخش مقالات): کارت‌های اطلاعیه در یک ردیف با اسکرول
   افقی نمایش داده می‌شوند تا با تعداد زیاد اطلاعیه هم فضای صفحه اصلی
   شلوغ نشود. */
.hex-homepage-announcements-grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	gap: 18px;
	padding: 4px 4px 10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	user-select: none;
}

.hex-homepage-announcements-grid::-webkit-scrollbar {
	display: none;
}

/* هنگام کشیدن (drag) با ماوس روی دسکتاپ، اسنپ اسکرول موقتاً غیرفعال
   می‌شود تا با حرکت آزاد ماوس تداخل نداشته باشد. */
.hex-homepage-announcements-grid.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.hex-homepage-announcement-card {
	position: relative;
	display: flex;
	flex: 0 0 320px;
	scroll-snap-align: start;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px 18px 16px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 12px;
	overflow: hidden;
}

.hex-homepage-announcement-card::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--hex-gradient-primary);
}

.hex-homepage-announcement-card-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--hex-gradient-primary);
	color: #ffffff;
	box-shadow: 0 4px 12px -3px rgba(var(--hex-primary-rgb), 0.5);
}

.hex-homepage-announcement-card-icon svg {
	width: 18px;
	height: 18px;
}

.hex-homepage-announcement-card-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-homepage-announcement-card-description {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--hex-text-secondary);
}

/* ---------- اسلایدر ---------- */
.hex-homepage-slider {
	position: relative;
	max-width: 1200px;
	margin: 24px auto 0;
	padding: 0 24px;
}

.hex-homepage-slider-track {
	position: relative;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: 18px;
	box-shadow: 0 10px 28px -10px rgba(15, 23, 42, 0.18);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hex-homepage-slider-track::-webkit-scrollbar {
	display: none;
}

/* قاب اسلاید روی دسکتاپ نسبت ۱۶۰۰×۵۶۰ (۲۰:۷، افقی و کشیده) دارد؛ روی
   موبایل (عرض صفحه ≤ ۱۰۲۴ پیکسل، هم‌راستا با نقطه‌شکست تعویض تصویر در
   PHP) به نسبت قبلی ۱۶:۹ برمی‌گردد تا تصویر موبایل به‌جای کشیده و کوتاه
   شدن، حالت طبیعی‌تری داشته باشد. با تگ <picture> در PHP، روی موبایل
   تصویر اختصاصی موبایل (در صورت تنظیم) و روی دسکتاپ تصویر دسکتاپ بارگذاری
   می‌شود - یعنی مدیر می‌تواند برای هرکدام جداگانه کراپ/برش مناسب همان
   دستگاه را انتخاب کند، بدون اینکه شکل قاب اسلایدر به‌هم بخورد. */
.hex-homepage-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 1600 / 560;
	overflow: hidden;
	display: block;
	text-decoration: none;
	background: var(--hex-bg-soft);
}

/* عنصر <picture> (که برای انتخاب خودکار تصویر دسکتاپ/موبایل اضافه شده)
   به‌طور پیش‌فرض inline است؛ اینجا مثل خود تصویر، کل فضای اسلاید را
   پر می‌کند. */
.hex-homepage-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.hex-homepage-slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hex-homepage-slide-caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 20px 26px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
	color: #ffffff;
	font-size: 17px;
	font-weight: 700;
}

.hex-homepage-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.hex-homepage-slider-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--hex-border-strong);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.hex-homepage-slider-dot.is-active {
	background: var(--hex-primary);
	transform: scale(1.25);
}

/* ---------- چیدمان مشترک بخش‌ها ---------- */
.hex-homepage-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px;
}

.hex-homepage-section-title {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 14px;
	font-size: 24px;
	font-weight: 700;
	color: var(--hex-text-heading);
	text-align: center;
}

/* زیرخط گرادیانی رنگی: عنصر تکرارشونده‌ی بصری که همه‌ی بخش‌های صفحه اصلی
   را با رنگ برند (پالت فعال) به هم پیوند می‌دهد. */
.hex-homepage-section-title::after {
	content: '';
	position: absolute;
	right: 50%;
	bottom: 0;
	transform: translateX(50%);
	width: 46px;
	height: 4px;
	border-radius: 999px;
	background: var(--hex-gradient-primary);
}

.hex-homepage-section-subtitle {
	margin: -20px 0 28px;
	font-size: 14px;
	color: var(--hex-text-secondary);
	text-align: center;
}

/* ---------- مقالات ---------- */
/* اسکرولی افقی (مثل کارت‌های اسلایدر): به‌جای چیدمان گرید، کارت‌ها در یک ردیف
   با اسکرول افقی نمایش داده می‌شوند تا با تعداد زیاد مقاله هم فضای صفحه اصلی
   شلوغ نشود. روی دسکتاپ (که تاچ/سوایپ در دسترس نیست) با موس (کلیک و کشیدن)
   هم قابل اسکرول است؛ نک. جاوااسکریپت data-hex-articles-scroll. */
.hex-homepage-articles-grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	gap: 22px;
	padding: 4px 4px 10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.hex-homepage-articles-grid.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

/* بدون این، شروع کشیدن روی خودِ عکس باعث می‌شد مرورگر (به‌خصوص کروم/ادج)
   حالت درگ بومی تصویر را فعال کند که با preventDefault در جاوااسکریپت هم
   گاهی یک فریم دیر می‌رسید؛ این قانون CSS از همان لحظه‌ی mousedown جلوی
   شروع آن درگ بومی را می‌گیرد. */
.hex-homepage-articles-grid img {
	-webkit-user-drag: none;
	user-drag: none;
}

.hex-homepage-articles-grid::-webkit-scrollbar {
	display: none;
}

/* نقطه‌های ناوبری زیر ردیف مقالات (مشابه دات‌های اسلایدر هدر)؛ نشان‌دهنده‌ی
   مقاله‌ی جاری در دید کاربر و قابل کلیک برای پرش مستقیم به هر مقاله. */
.hex-homepage-articles-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
}

.hex-homepage-articles-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--hex-border-strong);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.hex-homepage-articles-dot.is-active {
	background: var(--hex-primary);
	transform: scale(1.25);
}

.hex-homepage-article-card {
	display: flex;
	flex: 0 0 270px;
	scroll-snap-align: start;
	flex-direction: column;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.hex-homepage-article-card:hover {
	box-shadow: 0 14px 28px -10px rgba(var(--hex-primary-rgb), 0.3);
	transform: translateY(-3px);
}

/* نسبت‌ابعاد 16:9 (به‌جای ارتفاع پیکسلی ثابت که در موبایل/دسکتاپ به دو
   نسبت متفاوت می‌رسید) تا میزان کراپ عکس در هر دو حالت یکسان و متعادل
   بماند. */
.hex-homepage-article-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.hex-homepage-article-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px 20px 20px;
}

.hex-homepage-article-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hex-text-heading);
}

.hex-homepage-article-excerpt {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--hex-text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* دکمه‌ی «مشاهده کامل» زیر کارت مقاله؛ فقط وقتی مقاله «متن کامل» داشته
   باشد چاپ می‌شود. با رنگ گرادیانی پالت فعال هماهنگ است تا از بقیه‌ی
   دکمه‌های اکشن CTA سایت (هدر، باکس متن دلخواه و ...) هم‌خانواده باشد. */
.hex-homepage-article-more-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: 8px;
	border: none;
	border-radius: 999px;
	background: var(--hex-gradient-primary);
	color: var(--hex-text-on-primary);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 14px -4px rgba(var(--hex-primary-rgb), 0.4);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hex-homepage-article-more-btn:hover {
	box-shadow: 0 8px 18px -4px rgba(var(--hex-primary-rgb), 0.5);
	transform: translateY(-1px);
}

/* دکمه‌ی «مشاهده همه» زیر نوار افقی مقالات (وقتی تعداد مقالات از حد نوار
   بیشتر باشد؛ نک. HOMEPAGE_ARTICLES_SCROLL_LIMIT در PHP). */
.hex-homepage-articles-view-all {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}

.hex-homepage-articles-view-all-btn {
	padding: 10px 28px;
}

/* ---------- صفحه‌ی «همه مقالات» ---------- */
/* برخلاف نوار افقی صفحه اصلی، اینجا همه‌ی مقالات یک‌جا و به‌صورت شبکه‌ای
   (grid) نمایش داده می‌شوند؛ نک. render_all_articles_page در PHP. */
.hex-homepage-articles-all-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.hex-homepage-articles-all-heading .hex-homepage-section-title {
	margin-bottom: 0;
}

.hex-homepage-articles-all-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--hex-border-strong);
	background: var(--hex-bg-page);
	color: var(--hex-primary);
	text-decoration: none;
	font-size: 13.5px;
	white-space: nowrap;
}

.hex-homepage-articles-all-back:hover {
	background: var(--hex-primary-soft);
}

.hex-homepage-articles-all-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}

.hex-homepage-articles-all-grid .hex-homepage-article-card {
	flex: none;
	width: 100%;
}

.hex-homepage-articles-all-empty {
	text-align: center;
	color: var(--hex-text-secondary);
	padding: 32px 0;
}

/* قالب مخفی نگه‌دارنده‌ی متن کامل مقاله؛ فقط منبع داده برای جاوااسکریپت
   است و هیچ‌وقت مستقیماً روی صفحه دیده نمی‌شود (تگ <template> ذاتاً
   توسط مرورگر رندر نمی‌شود). */
.hex-homepage-article-content-template {
	display: none;
}

/* ---------- پاپ‌آپ متن کامل مقاله ---------- */
.hex-homepage-article-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.hex-homepage-article-modal.is-open {
	display: flex;
}

.hex-homepage-article-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
}

.hex-homepage-article-modal-box {
	position: relative;
	width: 100%;
	max-width: 600px;
	max-height: min(80vh, 640px);
	display: flex;
	flex-direction: column;
	background: var(--hex-bg-card);
	border-radius: 18px;
	box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.45);
	overflow: hidden;
}

/* عکس مقاله، بالای پاپ‌آپ (بالای هدر رنگی و متن)؛ اگر مقاله عکس نداشته
   باشد، جاوااسکریپت این عنصر را مخفی می‌کند (پیش‌فرض display:none). چون
   داخل modal-box با overflow:hidden قرار دارد، گوشه‌های بالایی عکس خودکار
   با رادیوس باکس هماهنگ می‌شوند. نسبت‌ابعاد 16:9 (به‌جای ارتفاع پیکسلی
   ثابت) استفاده شده تا در هر عرض پاپ‌آپ (موبایل کوچک تا دسکتاپ ۶۰۰px)
   میزان کراپ عکس یکسان بماند، نه اینکه در عرض‌های کوچک‌تر نسبت عکس به‌شکل
   متفاوتی فشرده/کشیده شود. */
.hex-homepage-article-modal-image {
	display: none;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	flex-shrink: 0;
}

.hex-homepage-article-modal-image.is-visible {
	display: block;
}

.hex-homepage-article-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	background: var(--hex-bg-card);
	border-bottom: 1px solid var(--hex-border-light);
	flex-shrink: 0;
}

.hex-homepage-article-modal-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

/* دکمه‌ی بستن: appearance و background-image صراحتاً none شده و رنگ‌ها
   با !important ست شده‌اند، چون استایل پیش‌فرض دکمه در برخی مرورگرها/قالب‌ها
   (رنگ‌های حالت اروری مثل قرمز) با اولویت بالاتر روی دکمه اعمال می‌شد و
   پس‌زمینه‌ی دلخواه ما را بازنویسی می‌کرد. */
.hex-homepage-article-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	appearance: none;
	-webkit-appearance: none;
	border: none !important;
	border-radius: 999px;
	background-image: none !important;
	background-color: var(--hex-border-light) !important;
	color: var(--hex-text-secondary) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hex-homepage-article-modal-close:hover {
	background-color: var(--hex-primary-soft) !important;
	color: var(--hex-primary-dark) !important;
}

.hex-homepage-article-modal-close .hex-icon {
	width: 18px;
	height: 18px;
}

/* بدنه‌ی پاپ‌آپ: اگر متن مقاله طولانی باشد، فقط همین ناحیه اسکرول
   می‌شود (نه کل صفحه پشت پاپ‌آپ). */
.hex-homepage-article-modal-body {
	padding: 20px 22px 26px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 2;
	color: var(--hex-text-primary);
}

/* وقتی پاپ‌آپ باز است، اسکرول خودِ صفحه پشت آن قفل می‌شود تا فقط بدنه‌ی
   پاپ‌آپ اسکرول شود، نه کل صفحه. */
body.hex-homepage-modal-open {
	overflow: hidden;
}

/* ---------- دانش‌آموزان برتر ماه ---------- */
.hex-homepage-top-students-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
}

.hex-homepage-top-student-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 28px 16px 20px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 16px;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
}

.hex-homepage-top-student-medal {
	position: absolute;
	top: 12px;
	inset-inline-start: 14px;
	font-size: 20px;
	line-height: 1;
}

.hex-homepage-top-student-avatar,
.hex-homepage-top-student-card .hex-avatar-initial {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.hex-homepage-top-student-name {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-homepage-top-student-class {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

/* ---------- افتخارات ---------- */
.hex-homepage-honors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.hex-homepage-honor-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 28px 18px 22px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 16px;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hex-homepage-honor-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(var(--hex-primary-rgb), 0.3);
}

.hex-homepage-honor-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--hex-gradient-primary);
	color: #ffffff;
	box-shadow: 0 6px 16px -4px rgba(var(--hex-primary-rgb), 0.5);
}

.hex-homepage-honor-card-icon svg {
	width: 26px;
	height: 26px;
}

.hex-homepage-honor-card-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-homepage-honor-card-subtitle {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--hex-text-secondary);
}

.hex-homepage-honor-card-date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	font-size: 12px;
	color: var(--hex-text-secondary);
}

.hex-homepage-honor-card-date .hex-icon {
	width: 13px;
	height: 13px;
}

/* ---------- گالری تصاویر ---------- */
/* چیدمان «Masonry» واقعی با CSS Grid: تعداد ستون‌ها ثابت است (چیدمان افقیِ
   چند عکس کنار هم در هر ردیف)، ولی هر آیتم با اسکریپت frontend.js بر اساس
   ارتفاع واقعیِ خودِ عکس، تعداد ردیف‌های ریز (grid-auto-rows) لازم را
   می‌گیرد (grid-row-end: span) تا نسبت ابعاد و مقیاس واقعیِ هر تصویر حفظ
   شود و در عین حال هم افقی (کنار هم در هر ردیف) و هم عمودی (زیر هم، بدون
   فاصله خالی اضافه) تمیز و فشرده در کنار هم بچینند. */
.hex-homepage-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 8px;
	gap: 18px;
	align-items: start;
}

.hex-homepage-gallery-item {
	margin: 0;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hex-homepage-gallery-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(var(--hex-primary-rgb), 0.3);
}

.hex-homepage-gallery-frame {
	display: block;
	overflow: hidden;
}

.hex-homepage-gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}

.hex-homepage-gallery-item:hover img {
	transform: scale(1.05);
}

.hex-homepage-gallery-item figcaption {
	padding: 9px 12px;
	font-size: 12.5px;
	color: var(--hex-text-secondary);
	text-align: center;
	background: var(--hex-bg-card);
}

@media (max-width: 900px) {
	.hex-homepage-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.hex-homepage-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.hex-homepage-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ---------- موسس ---------- */
/* پس‌زمینه‌ی باکس اصلی این بخش با رنگ برند/پالت (var(--hex-gradient-primary))
   پر می‌شود تا هم‌رنگ پالت رنگی سایت باشد و در هر پالتی (از جمله پالت
   تیره) خودکار هماهنگ بماند؛ رنگ متن‌ها و border دور عکس هم متناسب با این
   پس‌زمینه‌ی رنگی به سفید/نیمه‌شفاف تغییر کرده تا خوانا بمانند. */
.hex-homepage-founder-card {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 620px;
	margin: 0 auto;
	background: var(--hex-gradient-primary);
	border: 1px solid transparent;
	border-radius: 16px;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	padding: 26px;
}

.hex-homepage-founder-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	border: 3px solid rgba(255, 255, 255, 0.9);
	outline: 2px solid rgba(255, 255, 255, 0.4);
	outline-offset: 2px;
}

.hex-homepage-founder-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.18);
}

.hex-homepage-founder-photo-placeholder .hex-icon {
	width: 34px;
	height: 34px;
}

.hex-homepage-founder-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hex-homepage-founder-name {
	font-size: 17px;
	color: #ffffff;
}

.hex-homepage-founder-role {
	display: inline-flex;
	width: fit-content;
	color: var(--hex-primary-dark);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 12.5px;
}

.hex-homepage-founder-bio {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- معرفی کادر ---------- */
.hex-homepage-staff-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
}

.hex-homepage-staff-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 26px 16px 20px;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 16px;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hex-homepage-staff-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(var(--hex-primary-rgb), 0.3);
}

.hex-homepage-staff-card-avatar,
.hex-homepage-staff-card .hex-avatar-initial {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--hex-primary-soft);
	outline: 2px solid var(--hex-primary-light);
	outline-offset: 2px;
}

.hex-homepage-staff-card-name {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--hex-text-heading);
}

.hex-homepage-staff-card-class {
	font-size: 12.5px;
	color: var(--hex-text-secondary);
}

/* ---------- آمار ---------- */
/* پس‌زمینه‌ی این بخش (باکس کلی + کارت‌های داخلش) با توکن‌های اختصاصی
   --hex-stats-* (تعریف‌شده در بخش پالت‌ها) رنگ می‌گیرد، نه توکن‌های عمومی
   کارت (--hex-bg-card)؛ چون این بخش برخلاف بقیه‌ی بخش‌های صفحه اصلی باید
   همیشه با پس‌زمینه‌ی خودِ صفحه کنتراست داشته باشد: در پالت‌های روشن/رنگی
   (که صفحه روشن است) باکس و کارت‌ها تیره می‌شوند، و در پالت تیره (که خودِ
   صفحه تیره است) همین توکن‌ها برعکس و رنگی/سفید می‌شوند. گوشه‌ها هم عمداً
   تیز (بدون border-radius) هستند. */
.hex-homepage-stats {
	background: var(--hex-stats-bg);
	border-radius: 0;
}

/* این بخش برخلاف بقیه‌ی بخش‌های صفحه اصلی، پس‌زمینه‌اش باید کاملاً به
   لبه‌های چپ و راست صفحه بچسبد (تمام‌عرض/full-bleed) و ۱۰۰٪ عرض صفحه را
   پر کند؛ به همین دلیل محدودیت max-width/padding افقیِ عمومیِ
   .hex-homepage-section (که روی همه‌ی بخش‌ها اعمال می‌شود) برای همین بخش
   خنثی می‌شود. محتوای واقعی (عنوان + کارت‌های آمار) داخل یک لایه‌ی
   .hex-homepage-stats-inner قرار گرفته تا همچنان هم‌تراز با بقیه‌ی
   بخش‌های صفحه (همان عرض/padding مشترک) نمایش داده شود. */
.hex-homepage-stats.hex-homepage-section {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.hex-homepage-stats-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.hex-homepage-stats .hex-homepage-section-title {
	color: var(--hex-stats-heading);
}

.hex-homepage-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px;
}

.hex-homepage-stat-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 20px;
	border-radius: 16px;
	background: var(--hex-stats-card-bg);
	border: 1px solid var(--hex-stats-card-border);
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hex-homepage-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -10px rgba(var(--hex-primary-rgb), 0.3);
}

.hex-homepage-stat-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--hex-gradient-primary);
	box-shadow: 0 6px 16px -4px rgba(var(--hex-primary-rgb), 0.5);
}

.hex-homepage-stat-icon .hex-icon {
	width: 24px;
	height: 24px;
	color: #ffffff;
}

.hex-homepage-stat-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hex-homepage-stat-number {
	font-size: 24px;
	font-weight: 700;
	color: var(--hex-stats-heading);
}

.hex-homepage-stat-label {
	font-size: 13px;
	color: var(--hex-stats-label);
}

/* ---------- همکاری با ما ---------- */
.hex-homepage-cooperation-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: start;
}

.hex-homepage-cooperation-text .hex-homepage-section-title {
	margin-bottom: 14px;
	text-align: right;
}

.hex-homepage-cooperation-text .hex-homepage-section-title::after {
	right: 0;
	transform: none;
}

.hex-homepage-cooperation-desc {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 2;
	color: var(--hex-text-secondary);
}

.hex-homepage-cooperation-image {
	display: block;
	width: 100%;
	margin-inline: auto;
	border-radius: 16px;
	box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.2);
}

.hex-homepage-cooperation-form {
	position: relative;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 16px;
	box-shadow: 0 10px 28px -12px rgba(var(--hex-primary-rgb), 0.25);
	padding: 26px 26px 24px;
	overflow: hidden;
}

.hex-homepage-cooperation-form::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: var(--hex-gradient-primary);
}

.hex-homepage-inline-notice {
	display: none;
	padding: 10px 14px;
	margin-bottom: 16px;
	border-radius: 4px;
	border-right: 4px solid var(--hex-primary-light);
	background: var(--hex-primary-soft);
}

.hex-homepage-inline-notice.notice-error {
	border-right-color: var(--hex-color-error);
	background: #fef2f2;
}

.hex-homepage-cooperation-form p {
	margin: 0 0 16px;
}

.hex-homepage-cooperation-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hex-text-heading);
}

.hex-homepage-cooperation-form input[type="text"],
.hex-homepage-cooperation-form input[type="email"],
.hex-homepage-cooperation-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid var(--hex-border);
	border-radius: 10px;
	background: var(--hex-bg-page);
	color: var(--hex-text-primary);
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.hex-homepage-cooperation-form textarea {
	resize: vertical;
	line-height: 1.7;
}

.hex-homepage-cooperation-form input[type="text"]:focus,
.hex-homepage-cooperation-form input[type="email"]:focus,
.hex-homepage-cooperation-form textarea:focus {
	outline: none;
	border-color: var(--hex-primary-light);
	background: var(--hex-bg-card);
	box-shadow: 0 0 0 3px rgba(var(--hex-primary-rgb), 0.15);
}

.hex-homepage-website-field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* اختصاصیت این قانون عمداً برابر با «.hex-homepage-cooperation-form p» است؛
   چون بعد از آن در فایل می‌آید در cascade برنده می‌شود و margin پیش‌فرض
   پاراگراف‌های فرم را روی نوتیس (که با جاوااسکریپت داخل فرم prepend
   می‌شود) خنثی می‌کند. */
.hex-homepage-cooperation-form .hex-homepage-inline-notice p {
	margin: 0;
}

/* ---------- درباره مدرسه ---------- */
.hex-homepage-about-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
	background: var(--hex-bg-card);
	border: 1px solid var(--hex-border-light);
	border-radius: 16px;
	box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.08);
	padding: 32px;
}

.hex-homepage-about-inner.hex-homepage-about-inner--no-image {
	grid-template-columns: 1fr;
	text-align: center;
}

.hex-homepage-about-inner--no-image .hex-homepage-about-desc {
	margin-inline: auto;
}

.hex-homepage-about-desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 2;
	color: var(--hex-text-secondary);
}

.hex-homepage-about-image {
	display: block;
	width: 100%;
	margin-inline: auto;
	border-radius: 16px;
	box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.2);
}

/* ---------- باکس متن دلخواه ---------- */
/* پس‌زمینه‌ی این باکس گرادیانی و بر پایه‌ی رنگ برند پالت فعال است: چون سایت
   همیشه راست‌به‌چپ (RTL) است، ستون متن (اولین ستون در HTML) سمت راست و
   ستون تصویر سمت چپ قرار می‌گیرد؛ گرادیان با «to left» (فیزیکی، نه منطقی)
   از رنگ تیره‌ی برند در سمت راست (زیر متن)، عبور از رنگ اصلی، تا رنگ روشن
   برند در سمت چپ (زیر تصویر) پیش می‌رود؛ کل طیف گرادیان از سایه‌های خودِ
   پالت رنگی است و هیچ سفیدی در آن به کار نرفته تا هم عکس و هم متن، هر دو
   داخل حال‌وهوای رنگی برند دیده شوند. */
.hex-homepage-custom-box-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
	background: linear-gradient(to left, var(--hex-primary-dark) 0%, var(--hex-primary) 55%, var(--hex-primary-light) 100%);
	border-radius: 16px;
	box-shadow: 0 16px 36px -14px rgba(var(--hex-primary-rgb), 0.45);
	padding: 32px;
}

.hex-homepage-custom-box-inner.hex-homepage-custom-box-inner--no-image {
	grid-template-columns: 1fr;
	text-align: center;
	background: var(--hex-gradient-primary);
}

.hex-homepage-custom-box-inner--no-image .hex-homepage-custom-box-text .hex-homepage-section-title {
	text-align: center;
}

.hex-homepage-custom-box-inner--no-image .hex-homepage-custom-box-text .hex-homepage-section-title::after {
	right: 50%;
	transform: translateX(50%);
	background: #ffffff;
	opacity: 0.85;
}

.hex-homepage-custom-box-inner--no-image .hex-homepage-custom-box-call {
	justify-content: center;
}

.hex-homepage-custom-box-text .hex-homepage-section-title {
	margin-bottom: 14px;
	text-align: right;
	color: #ffffff;
}

.hex-homepage-custom-box-text .hex-homepage-section-title::after {
	right: 0;
	transform: none;
	background: #ffffff;
	opacity: 0.85;
}

.hex-homepage-custom-box-desc {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 2;
	color: rgba(255, 255, 255, 0.9);
}

.hex-homepage-custom-box-call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* دکمه‌ی تماس روی این زمینه‌ی رنگی، برعکس رنگ می‌شود (سفید با متن رنگی
   برند) تا هم خودش را از پس‌زمینه‌ی هم‌رنگش جدا کند و هم به‌عنوان نقطه‌ی
   کانونی (call-to-action) بیشتر به چشم بیاید. */
.hex-homepage-custom-box-call.hex-school-btn-primary {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--hex-primary-dark);
	box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25) !important;
}

.hex-homepage-custom-box-call.hex-school-btn-primary:hover {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.9);
	color: var(--hex-primary-dark);
	box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.3) !important;
}

.hex-homepage-custom-box-media {
	display: flex;
	justify-content: center;
}

/* عکس این بخش قبلاً کل عرض ستون را پر می‌کرد و سایه داشت؛ طبق درخواست قبلی
   ساده (بدون سایه) و کوچک‌تر (۶۰٪) شد. حالا اندازه‌ی دقیق آن با نوار
   «اندازه تصویر» تنظیمات سایت قابل تغییر است (نک. render_homepage_custom_box_section
   در PHP)؛ مقدار پیش‌فرض همان ۶۰٪ قبلی است تا برای سایت‌هایی که از قبل
   تنظیم شده، ظاهر فعلی حفظ شود. مثل تصاویر «درباره مدرسه»/«همکاری با ما»،
   عرض واقعی به‌صورت درصدی از ستون خودش (بدون سقف پیکسلی ثابت) محاسبه
   می‌شود، پس روی موبایل هم به‌طور طبیعی و متناسب کوچک‌تر می‌شود، بدون نیاز
   به یک قانون جداگانه در مدیای موبایل. */
.hex-homepage-custom-box-image {
	display: block;
	width: 100%;
	margin-inline: auto;
	border-radius: 16px;
	box-shadow: none;
}

/* ---------- دکمه شناور «بازگشت به بالا» ---------- */
/* از ابتدا در DOM حاضر است (نک. render_back_to_top_button در PHP) ولی با
   opacity/pointer-events مخفی است تا هم انیمیشن ظاهرشدن نرم باشد و هم
   قبل از عبور از آستانه‌ی اسکرول، هیچ کلیکی را نگیرد؛ نک. کلاس is-visible
   در frontend.js. */
.hex-homepage-back-to-top {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--hex-primary);
	color: #ffffff;
	box-shadow: 0 10px 24px -8px rgba(var(--hex-primary-rgb), 0.55);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.hex-homepage-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hex-homepage-back-to-top:hover {
	background: var(--hex-primary-dark);
	transform: translateY(-2px);
}

.hex-homepage-back-to-top .hex-icon {
	width: 22px;
	height: 22px;
}

@media (max-width: 640px) {
	.hex-homepage-back-to-top {
		left: 14px;
		bottom: 14px;
		width: 42px;
		height: 42px;
	}
}

/* ---------- فوتر ---------- */
.hex-homepage-footer {
	margin-top: 20px;
	background: var(--hex-bg-menu);
	color: rgba(255, 255, 255, 0.85);
}

.hex-homepage-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 36px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.hex-homepage-footer-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.hex-homepage-footer-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
}

.hex-homepage-footer-contact-item .hex-icon {
	width: 15px;
	height: 15px;
	color: var(--hex-primary-light);
}

.hex-homepage-footer-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.hex-homepage-footer-social-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-size: 13px;
	transition: background 0.15s ease;
}

.hex-homepage-footer-social-link:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
}

.hex-homepage-footer-social-link .hex-icon {
	width: 14px;
	height: 14px;
}

.hex-homepage-footer-text {
	margin: 0;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- نوار توسعه‌دهنده (زیر فوتر) ---------- */
/* یک گرادیانِ نیمه‌شفافِ مشکی روی همان رنگ پس‌زمینه فوتر (var(--hex-bg-menu))
   قرار می‌گیرد تا مستقل از پالت رنگی فعال سایت (روشن/تیره)، همیشه کمی
   تیره‌تر از خودِ فوتر دیده شود. */
.hex-homepage-dev-credit {
	background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--hex-bg-menu);
	padding: 14px 24px;
	text-align: center;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
}

.hex-homepage-dev-credit a {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}

.hex-homepage-dev-credit a:hover {
	color: #ffffff;
}

/* در نسخه‌ی دسکتاپ، عرض صفحه اصلی (هدر، اسلایدر و بخش‌های صفحه) به‌جای
   محدودشدن به یک عرض ثابت (1200px)، معادل ۹۰٪ عرض صفحه در نظر گرفته
   می‌شود؛ بخش «آمار» از این قاعده مستثناست چون خودِ آن (hex-homepage-stats)
   عمداً تمام‌عرض است و این عرض ۹۰٪ روی لایه‌ی داخلی‌اش
   (hex-homepage-stats-inner) اعمال می‌شود. */
@media (min-width: 1025px) {
	.hex-homepage-header-inner,
	.hex-homepage-slider,
	.hex-homepage-section,
	.hex-homepage-stats-inner {
		max-width: none;
		width: 90%;
	}
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 1024px) {
	.hex-homepage-cooperation-inner {
		grid-template-columns: 1fr;
	}

	.hex-homepage-cooperation-text .hex-homepage-section-title {
		text-align: center;
	}

	.hex-homepage-custom-box-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hex-homepage-custom-box-text .hex-homepage-section-title {
		text-align: center;
	}

	.hex-homepage-custom-box-call {
		justify-content: center;
	}

	.hex-homepage-about-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hex-homepage-slide {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 600px) {
	.hex-homepage-header-inner {
		padding: 12px 16px;
	}

	.hex-homepage-logo-text {
		font-size: 16px;
	}

	.hex-homepage-logo-image {
		width: 30px;
		height: 30px;
	}

	.hex-homepage-header-btn {
		padding: 8px 14px;
		font-size: 13px;
	}

	.hex-homepage-slider {
		margin-top: 16px;
		padding: 0 16px;
	}

	.hex-homepage-slide-caption {
		padding: 14px 16px;
		font-size: 14.5px;
	}

	.hex-homepage-section {
		padding: 36px 16px;
	}

	.hex-homepage-stats-inner {
		padding: 0 16px;
	}

	.hex-homepage-section-title {
		margin-bottom: 20px;
		font-size: 20px;
	}

	.hex-homepage-article-card {
		flex-basis: 78vw;
	}

	.hex-homepage-announcement-card {
		flex-basis: 82vw;
	}

	.hex-homepage-honors-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.hex-homepage-honor-card {
		padding: 20px 12px 16px;
	}

	.hex-homepage-honor-card-icon {
		width: 44px;
		height: 44px;
	}

	.hex-homepage-honor-card-icon svg {
		width: 22px;
		height: 22px;
	}

	.hex-homepage-honor-card-title {
		font-size: 14px;
	}

	.hex-homepage-honor-card-subtitle {
		font-size: 12px;
	}

	.hex-homepage-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.hex-homepage-stat-card {
		padding: 16px;
	}

	.hex-homepage-stat-icon {
		width: 44px;
		height: 44px;
	}

	.hex-homepage-stat-number {
		font-size: 20px;
	}

	.hex-homepage-staff-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.hex-homepage-staff-card {
		padding: 20px 12px 16px;
	}

	.hex-homepage-staff-card-avatar,
	.hex-homepage-staff-card .hex-avatar-initial {
		width: 64px;
		height: 64px;
	}

	.hex-homepage-staff-card-name {
		font-size: 14px;
	}

	.hex-homepage-staff-card-class {
		font-size: 11.5px;
	}

	.hex-homepage-cooperation-form {
		padding: 20px;
	}

	.hex-homepage-custom-box-inner {
		padding: 20px;
	}

	.hex-homepage-about-inner {
		padding: 20px;
	}

	.hex-homepage-founder-card {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}

	.hex-homepage-founder-info {
		align-items: center;
	}

	.hex-homepage-footer-inner {
		padding: 28px 16px;
	}
}

/* ================= هماهنگی عناصر شناور پنل با نوار پایین موبایل ================
   این بلوک عمداً در انتهای فایل قرار گرفته (نه کنار خودِ سلکتورهای اصلی‌شان)
   تا در ترتیب کد (source order) بعد از تمام قوانین دیگر بیاید و در همین
   بریک‌پوینت روی آن‌ها override کند (ترتیب اعمال قوانین CSS با specificity
   برابر، طبق ترتیب کد تعیین می‌شود، نه محل فیزیکی سلکتور اصلی در فایل).

   نوار پایین پنل (.hex-school-bottom-nav) فقط در همین بریک‌پوینت (حداکثر
   782px) نمایش داده می‌شود؛ در دسکتاپ نیازی به این override ها نیست. */
@media (max-width: 782px) {

	/* دکمه‌ی شناور «+» پیام‌ها/گروه‌ها: فقط داخل پنل رندر می‌شود (بعد از ورود)،
	   پس بدون قید اضافه‌ای همیشه در موبایل باید بالاتر از نوار پایین بنشیند. */
	.hex-school-fab {
		bottom: 90px;
	}

	/* نوار ثابت نوشتن پیام (چه در مکالمه‌ی خصوصی، چه در گروه): همین‌طور فقط
	   داخل پنل رندر می‌شود. */
	#hex-school-message-reply-form,
	#hex-school-group-message-form {
		bottom: 75px;
	}

	/* بنر نصب PWA (نک. class-hex-school-pwa.php) در wp_footer و سراسر سایت
	   خروجی داده می‌شود، نه فقط داخل پنل؛ پس بالا رفتنش فقط وقتی لازم است که
	   واقعاً نوار پایین پنل هم روی همین صفحه در حال نمایش باشد - یعنی وقتی
	   body کلاس «hex-school-panel-active» را دارد (نک. add_panel_body_class
	   در PHP، فقط برای کاربر لاگین‌شده‌ی دارای نقش افزونه افزوده می‌شود). در
	   صفحه اصلی عمومی سایت یا برای بازدیدکننده‌ی مهمان (بدون این کلاس)، بنر
	   همان موقعیت پیش‌فرض خودش را حفظ می‌کند. */
	body.hex-school-panel-active .hex-school-pwa-install-banner {
		bottom: 75px;
	}
}