/* ==========================================================================
   Parko Design System
   --------------------------------------------------------------------------
   این فایل به‌صورت افزایشی (Additive) عمل می‌کند: هیچ کلاس یا استایل موجودی
   را حذف نمی‌کند، فقط:
     1) رنگ/شعاع/سایه‌ی پیش‌فرض کامپوننت‌های Radzen را با override کردن
        CSS Custom Properties استاندارد آن (--rz-*) مدرن می‌کند،
     2) مجموعه‌ای از توکن‌های طراحی (Spacing, Radius, Shadow, Typography)
        و چند کلاس Utility پایه برای استفاده‌ی تدریجی در صفحات جدید/بازطراحی‌شده
        فراهم می‌کند (دقیقاً همان چیزی که در بخش "Design System" سند معماری
        پیشنهاد شده بود: AppButton، AppCard، AppPageHeader و ...).
   این فایل باید بعد از site.css و بعد از تم Radzen (material.css) لود شود. */

:root {
  /* -------------------- Brand / Primary -------------------- */
  --rz-primary: #1B4F8C;           /* آبی تیره — رنگ اصلی برند پارکو (هماهنگ با فرادانش) */
  --rz-primary-light: #3B7DD8;
  --rz-primary-lighter: #eaf1fa;
  --rz-primary-dark: #123863;

  --rz-secondary: #0EA5A4;         /* فیروزه‌ای — رنگ ثانویه */
  --rz-secondary-light: #2dd4bf;
  --rz-secondary-lighter: #ecfdf5;
  --rz-secondary-dark: #0d7d7c;

  /* -------------------- Functional colors -------------------- */
  --rz-success: #16a34a;
  --rz-warning: #d97706;
  --rz-danger: #dc2626;
  --rz-info: #0284c7;

  /* -------------------- Neutral scale (base) -------------------- */
  --rz-base-100: #ffffff;
  --rz-base-200: #f8fafc;
  --rz-base-300: #f1f5f9;
  --rz-base-400: #e2e8f0;
  --rz-base-500: #cbd5e1;
  --rz-base-600: #94a3b8;
  --rz-base-700: #64748b;
  --rz-base-800: #334155;
  --rz-base-900: #0f172a;

  /* -------------------- Shape -------------------- */
  --rz-border-radius: 10px;

  /* -------------------- Parko-specific design tokens -------------------- */
  --parko-space-1: 4px;
  --parko-space-2: 8px;
  --parko-space-3: 12px;
  --parko-space-4: 16px;
  --parko-space-5: 24px;
  --parko-space-6: 32px;
  --parko-space-8: 48px;

  --parko-radius-sm: 6px;
  --parko-radius-md: 10px;
  --parko-radius-lg: 16px;
  --parko-radius-full: 999px;

  --parko-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --parko-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --parko-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  --parko-font-family: "iransansweb", "Vazir", "Segoe UI", Tahoma, sans-serif;

  /* -------------------- Parko-native color tokens (Radzen-independent) --------
     کامپوننت‌های جدید (BuildingBlocks/UI و wwwroot/css/parko-ui.css) فقط از این
     متغیرها استفاده می‌کنند و هیچ وابستگی مفهومی به Radzen ندارند.
     به‌روزرسانی: پالت رنگ با فرادانش هماهنگ شد (آبی تیره/روشن به‌جای بنفش/ایندیگو) —
     چون این توکن‌ها در همه‌جای پروژه استفاده می‌شوند، همین یک تغییر باعث هماهنگی بصری
     خودکار در تمام ماژول‌ها (Dashboard، Maintenance، Wallet، Chat، Identity) می‌شود. */
  --parko-color-primary: #1B4F8C;
  --parko-color-primary-hover: #163f70;
  --parko-color-primary-light: #eaf1fa;
  --parko-color-secondary: #3B7DD8;
  --parko-color-success: #16a34a;
  --parko-color-success-light: #f0fdf4;
  --parko-color-warning: #d97706;
  --parko-color-warning-light: #fffbeb;
  --parko-color-danger: #D64545;
  --parko-color-danger-light: #fef2f2;
  --parko-color-info: #0EA5A4;
  --parko-color-info-light: #f0fdfa;

  --parko-text-primary: #0f172a;
  --parko-text-secondary: #475569;
  --parko-text-muted: #94a3b8;
  --parko-text-on-primary: #ffffff;

  --parko-surface: #ffffff;
  --parko-surface-alt: #f8fafc;
  --parko-border: #e2e8f0;
  --parko-border-strong: #cbd5e1;
}

/* ==========================================================================
   Typography — از فونت فارسی موجود در پروژه استفاده می‌کند
   ========================================================================== */
body {
  font-family: var(--parko-font-family);
  background-color: var(--rz-base-200);
  color: var(--rz-base-900);
}

/* ==========================================================================
   Layout polish — سایدبار و هدر برنامه
   ========================================================================== */
.rz-sidebar {
  background: linear-gradient(180deg, var(--rz-primary-dark) 0%, #1e1b4b 100%);
  box-shadow: var(--parko-shadow-lg);
}

.rz-panel-menu .rz-navigation-item-link {
  border-radius: var(--parko-radius-md);
  margin: 2px var(--parko-space-2);
}

.rz-body {
  background-color: var(--rz-base-200);
}

/* ==========================================================================
   Cards — سایه و شعاع مدرن‌تر برای همه‌ی کارت‌ها
   ========================================================================== */
.rz-card {
  border-radius: var(--parko-radius-lg);
  box-shadow: var(--parko-shadow-sm);
  border: 1px solid var(--rz-base-400);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.rz-card:hover {
  box-shadow: var(--parko-shadow-md);
}

/* ==========================================================================
   Buttons — شعاع و وزن یکسان برای همه دکمه‌ها
   ========================================================================== */
.rz-button {
  border-radius: var(--parko-radius-md);
  font-weight: 600;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.rz-button:not(:disabled):active {
  transform: translateY(1px);
}

/* ==========================================================================
   DataGrid — خوانایی بهتر جدول‌ها
   ========================================================================== */
.rz-data-grid {
  border-radius: var(--parko-radius-md);
  overflow: hidden;
}

.rz-data-grid .rz-data-row:hover {
  background-color: var(--rz-primary-lighter);
}

/* ==========================================================================
   Utility classes — برای استفاده در صفحات جدید (طبق الگوی AppButton/AppCard)
   این کلاس‌ها به‌صورت افزایشی هستند و می‌توانند به‌مرور در Componentهای Blazor
   (مثلاً یک AppPageHeader.razor ساده) استفاده شوند.
   ========================================================================== */
.parko-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--parko-space-4);
  padding: var(--parko-space-5) 0;
  margin-bottom: var(--parko-space-4);
}

.parko-page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--rz-base-900);
  margin: 0;
}

.parko-page-subtitle {
  font-size: 0.875rem;
  color: var(--rz-base-700);
  margin-top: var(--parko-space-1);
}

.parko-card {
  background: var(--rz-base-100);
  border: 1px solid var(--rz-base-400);
  border-radius: var(--parko-radius-lg);
  box-shadow: var(--parko-shadow-sm);
  padding: var(--parko-space-5);
}

.parko-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--parko-space-3);
  padding: var(--parko-space-8) var(--parko-space-4);
  color: var(--rz-base-700);
  text-align: center;
}

.parko-skeleton {
  background: linear-gradient(90deg, var(--rz-base-300) 25%, var(--rz-base-400) 37%, var(--rz-base-300) 63%);
  background-size: 400% 100%;
  animation: parko-skeleton-loading 1.4s ease infinite;
  border-radius: var(--parko-radius-sm);
}

@keyframes parko-skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ==========================================================================
   Responsive helpers — طبق الزام Responsive بودن تمام صفحات
   ========================================================================== */
@media (max-width: 768px) {
  .parko-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--parko-space-2);
  }

  .parko-hide-mobile {
    display: none !important;
  }

  /* جداول عریض روی موبایل به‌صورت افقی اسکرول شوند به‌جای شکستن layout */
  .rz-data-grid {
    overflow-x: auto;
  }
}

@media (min-width: 769px) {
  .parko-hide-desktop {
    display: none !important;
  }
}

/* ==========================================================================
   Accessibility — وضعیت focus قابل‌مشاهده برای ناوبری با کیبورد
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.rz-button:focus-visible {
  outline: 2px solid var(--rz-secondary);
  outline-offset: 2px;
}