feat: enhance ResourceWorkingHoursPanel with improved error handling and UI updates

- Added new icons and improved error messaging for better user feedback.
- Refactored state management to include baseline comparison for dirty state detection.
- Introduced functionality to copy shifts across all days and reset to baseline.
- Updated UI layout for better responsiveness and usability.
- Enhanced tests to cover new features and ensure proper functionality.

refactor: update ClinicAppointmentSettingsPage to use PageHeader component

- Replaced BackButton with PageHeader for a more consistent header layout.
- Simplified the structure of the appointment settings page for better readability.

test: improve ResourceDetailPage tests for shift management

- Updated tests to reflect changes in shift display and error handling.
- Added tests for new features including the reset functionality and copying shifts.

style: add styles for weekly shift layout in ResourceWorkingHoursPanel

- Introduced new CSS classes for better layout and responsiveness of the weekly shift display.
- Ensured styles are consistent with the overall design system.

assets/admin/styles.css

@@ -974,6 +974,43 @@ html, body { max-width: 100%; overflow-x: hidden; }
 .time-input-plain::-webkit-calendar-picker-indicator { display: none; }
 .time-input-plain { appearance: none; -webkit-appearance: none; }
 
+/* ── شیفت هفتگی منبع ──────────────────────────────────────────────────────
+   چیدمان «یک ردیف = یک روز». کلاس است نه inline style، چون شکستِ ریسپانسیو و
+   حالت خطا با style درون‌خطی ممکن نیست، و رنگ‌ها که از توکن بیایند دارک‌مود و
+   تراکم فشرده خودبه‌خود درست می‌مانند. */
+.wh-day {
+  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto;
+  gap: 12px; align-items: start;
+  padding: 11px 14px; border: 1px solid var(--border);
+  border-radius: var(--r-sm); background: var(--surface-2); transition: .15s;
+}
+/* روزِ دارای شیفت باید از روزِ تعطیل جدا دیده شود، وگرنه هفته یک بلوک یک‌دست است. */
+.wh-day.has-shift { background: var(--surface); border-color: var(--border-2); }
+.wh-day.err { border-color: var(--danger); background: var(--danger-bg); }
+.wh-day-name { font-weight: 700; font-size: 13.5px; color: var(--text); padding-top: 10px; }
+.wh-day-off  { font-size: 12.5px; color: var(--text-3); padding-top: 11px; }
+.wh-rows     { display: grid; gap: 8px; min-width: 0; }
+.wh-actions  { display: flex; align-items: center; gap: 4px; padding-top: 3px; }
+
+.wh-shift { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.wh-time  { width: 138px; gap: 6px; }
+.wh-time .lbl { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }
+.wh-time input { font-size: 13.5px; }
+/* چک‌باکس خام ~۱۳px است و زیر حداقلِ ارتفاعِ لمسی می‌افتد. */
+.wh-eod { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
+.wh-eod input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
+
+@media (max-width: 720px) {
+  .wh-day { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .wh-day-name, .wh-day-off, .wh-actions { padding-top: 0; }
+  .wh-time { width: 100%; }
+}
+
+/* تعطیلات/استثنا در یک ستون و پیش‌نمایش در ستون دیگر — سه کارتِ نامرتبط در یک
+   auto-fit، ستون کناری را نیمه‌خالی رها می‌کرد. */
+.wh-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
+@media (max-width: 1100px) { .wh-two-col { grid-template-columns: minmax(0, 1fr); } }
+
 /* ── CKEditor 5 ────────────────────────────────────────────────────────────
    ادیتور همهٔ رنگ‌هایش را از متغیرهای --ck-color-* خودش می‌گیرد و پیش‌فرض آن‌ها
    روشن است؛ بدون این نگاشت، ادیتور در [data-theme="dark"] سفید می‌ماند. */