/* ==========================================================================
   ویندی (Windyapp.ir) — سیستم طراحی مشترک
   نسخه: بازسازی هویت بصری (ناوی + فیروزه‌ای)
   این فایل باید در تمام صفحات (عمومی، پرتال، ادمین) لود شود.
   ========================================================================== */

:root {
  /* --- رنگ پایه --- */
  --navy-900: #071a33;
  --navy-800: #0a2540;
  --navy-700: #123a63;
  --navy-100: #eef2f7;

  --teal-500: #12c9a0;   /* موفقیت / فعال / اقدام اصلی (پس‌زمینه) */
  --teal-600: #0ea888;
  --teal-700: #087a5c;   /* برای متن روی زمینه‌ی --teal-100 (کنتراست کافی) */
  --teal-100: #e3f9f3;
  --teal-on:  #0a2540;   /* رنگ متن روی دکمه‌ی فیروزه‌ای؛ سفید روی این فیروزه کنتراست کافی ندارد */

  --blue-500: #2f6fed;   /* لینک‌ها، اطلاعات، اقدامات ثانویه */
  --blue-600: #1f57c9;
  --blue-100: #eaf1ff;

  --warn-500: #f2a93b;   /* فقط وضعیت انتظار / هشدار غیرمخرب */
  --warn-100: #fdf1de;
  --warn-text: #8a5c14;  /* متن روی --warn-100، کنتراست کافی */

  --danger-500: #c62839; /* فقط خطا / رد / حذف — این مقدار برای متن سفید روی آن کنتراست کافی دارد */
  --danger-100: #fdeaec;

  --gray-900: #1c2733;
  --gray-700: #4b5768;
  --gray-500: #5a6b80;   /* برای متن ثانویه؛ کنتراست کافی روی زمینه‌ی سفید */
  --gray-300: #d6dde5;
  --gray-100: #f4f6f9;
  --white: #ffffff;

  /* --- تایپوگرافی --- */
  --font-main: 'Vazir', Tahoma, sans-serif;

  /* --- هندسه و سایه --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 10px 25px rgba(10, 37, 64, 0.10);
  --transition: all .25s cubic-bezier(.25,.8,.25,1);
}

* { box-sizing: border-box; font-family: var(--font-main); }

html { overflow-x: hidden; max-width: 100%; }
body { background: var(--gray-100); color: var(--gray-900); overflow-x: hidden; max-width: 100%; }

/* هر گرید/فلکسی که آیتم‌هاش ممکنه محتوای عریض (جدول و...) داشته باشن، باید این را
   روی ستون‌های اصلی هم اعمال کنند تا در موبایل کل صفحه عریض نشود، نه فقط این کلاس‌ها */
.stat-grid, .chart-grid, .dashboard-grid, .content-mgmt-grid,
.stat-grid > *, .chart-grid > *, .dashboard-grid > *, .content-mgmt-grid > * {
  min-width: 0;
}

/* --- لوگو --- */
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo img { height: 34px; width: auto; }
.brand-logo span { font-weight: 800; color: var(--navy-800); font-size: 18px; }

/* --- دکمه‌ها --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--radius-sm); padding: 10px 18px; font-weight: 700;
  cursor: pointer; transition: var(--transition); font-size: 14px; }
.btn-primary { background: var(--teal-500); color: var(--teal-on); }
.btn-primary:hover { background: var(--teal-600); }
.btn-secondary { background: var(--blue-500); color: #fff; }
.btn-secondary:hover { background: var(--blue-600); }
.btn-outline { background: transparent; color: var(--navy-800); border: 1px solid var(--gray-300); }
.btn-outline:hover { border-color: var(--navy-800); }
.btn-danger { background: var(--danger-500); color: #fff; }
.btn-danger:hover { background: #a82230; }
.btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue-500); outline-offset: 2px;
}
.btn { min-height: 40px; }

/* --- کارت --- */
.card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px; }

/* --- برچسب وضعیت --- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-success { background: var(--teal-100); color: var(--teal-700); }
.badge-pending { background: var(--warn-100); color: var(--warn-text); }
.badge-danger  { background: var(--danger-100); color: var(--danger-500); }
.badge-info    { background: var(--blue-100); color: var(--blue-600); }
.badge-muted   { background: var(--gray-100); color: var(--gray-700); }

/* --- هدر عمومی --- */
.site-header { background: var(--white); border-bottom: 1px solid var(--gray-300); box-shadow: var(--shadow-sm); }
.site-header a { color: var(--gray-700); text-decoration: none; }
.site-header a:hover, .site-header a.active { color: var(--blue-500); }

/* --- سایدبار پرتال/ادمین --- */
.app-sidebar { background: var(--navy-900); color: #cfe0f0; }
.app-sidebar a { color: #cfe0f0; text-decoration: none; }
.app-sidebar a.active, .app-sidebar a:hover { background: var(--navy-700); color: #fff; }

/* --- کارت آماری با آیکون دایره‌ای (داشبورد) --- */
.stat-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stat-card-info { display: flex; flex-direction: column; gap: 6px; text-align: end; }
.stat-card-label { font-size: 13px; color: var(--gray-700); }
.stat-card-value { font-size: 28px; font-weight: 800; color: var(--navy-800); line-height: 1; }
.stat-card-unit { font-size: 12px; color: var(--gray-500); }
.stat-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 20px; flex-shrink: 0; }
.stat-icon.blue  { background: var(--blue-100); color: var(--blue-600); }
.stat-icon.teal  { background: var(--teal-100); color: var(--teal-700); }
.stat-icon.warn  { background: var(--warn-100); color: var(--warn-text); }
.stat-icon.navy  { background: var(--navy-100); color: var(--navy-800); }
.stat-card-inset { background: var(--gray-100); border-radius: var(--radius-md); padding: 16px; }

/* --- دکمه‌های فیلتر (همه/فعال/متوقف) --- */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--gray-300); color: var(--gray-700); text-decoration: none; font-size: 13px; font-weight: 700;
}
.filter-pill.active { border-color: var(--blue-500); color: var(--blue-500); background: var(--blue-100); }
.tag-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; background: var(--gray-100); color: var(--gray-700);
}

/* --- سایدبار پرتال کاربر (خانه/کاربران/نقشه/افزودن/تنظیمات) --- */
.portal-sidebar {
    position: fixed; inset-inline-start: 0; top: 0; height: 100vh; width: 230px;
    background: var(--navy-900); color: #cfe0f0; display: flex; flex-direction: column;
    z-index: 1000; transition: var(--transition);
}
.portal-sidebar-brand {
    display: flex; align-items: center; gap: 10px; padding: 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.portal-sidebar-brand img { height: 28px; }
.portal-sidebar-brand strong { color: #fff; font-size: 15px; display: block; }
.portal-sidebar-brand span { color: rgba(255,255,255,0.6); font-size: 11px; }
.portal-sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; flex: 1; }
.portal-sidebar-nav a {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
    color: #cfe0f0; text-decoration: none; font-size: 14px; transition: var(--transition);
}
.portal-sidebar-nav a i { width: 18px; text-align: center; }
.portal-sidebar-nav a:hover { background: var(--navy-700); color: #fff; }
.portal-sidebar-nav a.active { background: linear-gradient(90deg, var(--teal-500), var(--blue-500)); color: #fff; }
.portal-content-shift { margin-inline-start: 230px; }
@media (max-width: 768px) {
    .portal-sidebar { display: none; }
    .portal-content-shift { margin-inline-start: 0; }
}

/* --- جدول --- */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th { background: var(--gray-100); color: var(--gray-700); font-weight: 700;
  padding: 12px; text-align: right; font-size: 13px; }
table.data-table td { padding: 12px; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
table.data-table tr:hover td { background: var(--navy-100); }

/* --- پیام‌ها --- */
.alert { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; }
.alert-success { background: var(--teal-100); color: var(--teal-700); }
.alert-danger  { background: var(--danger-100); color: var(--danger-500); }

/* --- فرم --- */
.field-label { font-size: 13px; font-weight: 700; color: var(--gray-700); margin-bottom: 6px; display: block; }
.field-input { width: 100%; border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px; transition: var(--transition); min-height: 40px; }
.field-input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
.field-error { color: var(--danger-500); font-size: 12px; margin-top: 4px; }

/* ==========================================================================
   واکنش‌گرایی و دسترس‌پذیری — شبکه‌ی ایمن مشترک (بخش ۵.۴ سند)
   این قوانین مکمل مدیای‌کوئری‌های اختصاصی هر صفحه هستند، نه جایگزین آن‌ها.
   ========================================================================== */

/* اندازه‌ی لمس حداقلی برای عناصر تعاملی کوچک (آیکون‌دکمه‌ها) */
.icon-btn, button, a.btn { min-width: 36px; }

/* هر جدولی که در یک والد با کلاس table-responsive باشد، در موبایل اسکرول افقی می‌گیرد */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* شبکه‌ی کارت‌های آماری/نمودار: روی دسکتاپ ردیفی، زیر ۷۶۸ پیکسل عمودی */
.stat-grid, .chart-grid, .dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}

@media (max-width: 768px) {
  .stat-grid, .chart-grid, .dashboard-grid { grid-template-columns: 1fr; }
  .app-sidebar { position: fixed; inset-inline-start: -260px; top: 0; height: 100vh; width: 260px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: var(--transition); z-index: 1000; }
  .app-sidebar.open { inset-inline-start: 0; }
  .card { padding: 14px; }
  .btn { padding: 10px 14px; font-size: 13.5px; }
}

/* کاهش حرکت برای کاربرانی که در سیستم‌عامل «کاهش انیمیشن» را فعال کرده‌اند */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; }
}