/* فایلِ پنجمِ استایل — «پوستهٔ» سایت.
   main2.css (۹۴٪) و theme.css (۹۶٪) به سقفِ ~۱۶ کیلوبایتیِ پاسخِ این هاست
   چسبیده‌اند و ui.css محلِ وصله‌های موردی است. زبانِ طراحیِ مشترک این‌جا جمع
   می‌شود تا یک‌جا خوانده و یک‌جا عوض شود.

   حالتِ شیشه‌ای (هالهٔ رنگی + کارتِ نیمه‌شفاف) قبلاً این‌جا بود و برداشته شد. */

/* --- زبانِ طراحیِ «مانیتورینگ واریزی»، این‌بار برای همهٔ صفحه‌ها -----------
   آن صفحه استایلش را داخلِ <style> خودِ تمپلیت داشت و هرگز وارد فایل‌های
   مشترک نشد؛ برای همین تنها جزیرهٔ خوش‌ظاهرِ سایت مانده بود. چهار چیزی که
   جذابش کرده بود این‌جا عمومی می‌شود: سایهٔ دولایه، نوارِ رنگیِ بالای کارت،
   سرصفحهٔ رنگی، و ورودیِ کم‌رنگ.

   رنگ از --am-hue می‌آید که base.html روی <main> از روی nav_section ست
   می‌کند، پس هر صفحه رنگِ آیتمِ منوی خودش را می‌گیرد و هیچ تمپلیتی عوض
   نمی‌شود. fallback به --primary اجباری است: ویویی که در NAV_SECTIONS نگاشت
   ندارد --am-hue ندارد، و شورت‌هندِ نامعتبر کلِ نوار را حذف می‌کند نه اینکه
   رنگِ دیگری بگذارد. */
.card{border-top:3px solid var(--am-hue,var(--primary));border-radius:14px;
  box-shadow:0 1px 2px rgba(24,36,28,.05),0 8px 22px rgba(24,36,28,.06);}

/* سرصفحه بدونِ تغییرِ مارک‌آپ ساخته می‌شود: حاشیهٔ منفی دقیقاً به اندازهٔ
   padding خودِ کارت، تا عنوان تا لبه‌ها کش بیاید. :first-child لازم است —
   کارت‌هایی که h3 وسطشان دارند نباید سرصفحهٔ شناور بگیرند. */
.card > h3:first-child{
  margin:-20px -22px 16px;padding:13px 22px;
  background:var(--surface-2);border-bottom:1px solid var(--border);
  border-radius:11px 11px 0 0;
  color:color-mix(in srgb,var(--am-hue,var(--primary)) 72%,#12291d);}
@media (max-width:640px){
  /* main2.css در این نقطه‌شکست padding کارت را ۱۴ می‌کند؛ حاشیهٔ منفی هم باید */
  .card > h3:first-child{margin:-14px -14px 12px;padding:11px 14px;}
}

/* ورودی‌ها کم‌رنگ می‌شوند تا از سطحِ کارت جدا دیده شوند — همان کاری که
   .pm .filters می‌کرد. محدود به داخلِ کارت، تا فرم‌های بیرونی دست‌نخورده بمانند. */
.card select,.card textarea,
.card input[type=text],.card input[type=number],.card input[type=search],
.card input[type=date],.card input[type=tel],.card input[type=email]{
  background:var(--surface-2);}

/* کارتِ کلیک‌پذیر باید حس کند که کلیک‌پذیر است */
.fcard,.dash-tile,.kpi{transition:transform .08s,border-color .15s,background .15s;}
.fcard:hover,.dash-tile:hover{transform:translateY(-2px);}

/* --- کاشیِ کارتابلِ بدونِ مورد ------------------------------------------
   دسته‌هایی که فعلاً چیزی ندارند هم نشان داده می‌شوند تا معلوم باشد چه نوع
   کارهایی وجود دارد. ولی نباید هم‌وزنِ کاشی‌های واقعی دیده شوند، وگرنه
   کارتابل یک شبکهٔ یکدست می‌شود و آن‌که ۹ مورد دارد گم می‌شود.
   opacity به‌تنهایی کافی است و رنگِ هر دسته را هم با خودش کم‌رنگ می‌کند؛
   روی هاور کامل برمی‌گردد چون هنوز راهِ رسیدن به آن بخش است. */
.dash-tile.is-empty{opacity:.42;box-shadow:none;}
.dash-tile.is-empty:hover{opacity:1;}

/* --- میله‌ها ------------------------------------------------------------
   قبلاً رنگِ هر میله inline در تمپلیت نوشته می‌شد (یکی از روی شناسهٔ نماینده،
   یکی از --am-s3/--am-s5). هر دو حذف شدند تا میله هم مثل دونات از --am-hue
   همان صفحه بیاید. نمودارِ تک‌سری به رنگِ متفاوت برای هر ردیف نیازی ندارد —
   نامِ هر ردیف کنارش نوشته شده. */
.bar-fill,.am-bar-fill{background:var(--am-hue,var(--primary));}
/* ماهِ جاری هنوز تمام نشده، پس کم‌رنگ‌تر است تا با ماه‌های کامل اشتباه نشود */
.bar-fill.is-now{background:color-mix(in srgb,var(--am-hue,var(--primary)) 45%,#fff);}

/* --- داشبورد: رنگ‌بندیِ «مانیتورینگ واریزی» -------------------------------
   داشبورد با یک رنگِ بخش، یکدست سبز می‌شد: هم نوارِ کارت‌ها، هم دونات‌ها.
   همان کاری را می‌کند که صفحهٔ مانیتورینگ می‌کند — هر کارت رنگِ خودش را
   دارد — و از همان پنج رنگِ آن صفحه استفاده می‌شود، که عمداً از رنگ‌های منو
   کم‌اشباع‌ترند: در آیکونِ ۱۹ پیکسلی رنگِ تند تمیز است، در حلقهٔ ۱۵۰ پیکسلی
   داد می‌زند.

   --am-hue روی خودِ کارت بازتعریف می‌شود، پس دوناتِ داخلش هم خودبه‌خود طیفِ
   همان رنگ را می‌گیرد. nth-child به‌جای کلاسِ جدید، تا تمپلیت دست نخورد. */
main.am-h-dashboard .kpi-row .kpi:nth-child(1){--am-hue:#2f8451}
main.am-h-dashboard .kpi-row .kpi:nth-child(2){--am-hue:#2f6ea6}
main.am-h-dashboard .kpi-row .kpi:nth-child(3){--am-hue:#7a4fa0}
main.am-h-dashboard .kpi-row .kpi:nth-child(4){--am-hue:#b9770e}
main.am-h-dashboard .grid3 > .card:nth-child(1){--am-hue:#2f8451}
main.am-h-dashboard .grid3 > .card:nth-child(2){--am-hue:#2f6ea6}
main.am-h-dashboard .grid3 > .card:nth-child(3){--am-hue:#7a4fa0}
main.am-h-dashboard .grid2 > .card:nth-child(1){--am-hue:#b9770e}
main.am-h-dashboard .grid2 > .card:nth-child(2){--am-hue:#2f8451}

/* کارت‌های عددِ بالای داشبورد همان شکلِ کارت‌های مانیتورینگ را می‌گیرند:
   نوارِ رنگی بالا، عنوانِ هم‌رنگ، سایهٔ دولایه، و بالاآمدن زیر نشانگر. */
.kpi{border-top:3px solid var(--am-hue,var(--primary));border-radius:14px;
  box-shadow:0 1px 2px rgba(24,36,28,.05),0 8px 22px rgba(24,36,28,.06);}
.kpi:hover{transform:translateY(-2px);}
.kpi__t{color:color-mix(in srgb,var(--am-hue,var(--primary)) 78%,#12291d);
  font-weight:700;}

/* --- دوناتِ کلیک‌پذیر ------------------------------------------------------
   حلقه از conic-gradient به SVG رفت تا هر بخش یک عنصرِ واقعی باشد. قاعده‌های
   .donut در main2.css هنوز پس‌زمینهٔ گرادیان و دایرهٔ سفیدِ وسط (::after) را
   می‌کشند؛ هر دو باید خنثی شوند وگرنه روی SVG می‌افتند. خودِ کلاس .donut
   می‌ماند چون اندازهٔ متنِ وسط در theme.css/ui.css به آن چسبیده است. */
.donut.am-donut{background:none;box-shadow:none;}
.donut.am-donut::after{display:none;}
/* هاورِ هر بخش، بقیه را کم‌رنگ می‌کند — این قاعده از قبل در theme.css بود ولی
   تا وقتی حلقه conic-gradient بود هیچ عنصری نداشت که به آن بخورد. */
.am-donut__seg{cursor:default;}
/* ردیفِ متناظر در راهنما هم هم‌زمان روشن می‌شود، تا معلوم باشد کدام است */
.am-legend__item.is-on{background:var(--surface-2);border-radius:7px;
  padding-inline:5px;margin-inline:-5px;}

/* تولتیپ سرمه‌ای است مثل سایدبار. position:fixed چون کارت‌ها overflow و
   stacking context دارند و نسخهٔ absolute داخلشان بریده می‌شد. */
/* left/top فیزیکی‌اند چون JS هم style.left/top می‌گذارد؛ inset-inline-start در
   حالت راست‌به‌چپ به right ترجمه می‌شد و کادر بینِ دو لبه کش می‌آمد. */
.am-tip{position:fixed;z-index:60;top:0;left:0;pointer-events:none;
  opacity:0;transition:opacity .12s;max-width:260px;
  background:var(--am-nav,#151d2b);color:#fff;border-radius:9px;
  padding:8px 11px;font-size:12px;line-height:1.75;
  box-shadow:0 8px 24px rgba(0,0,0,.28);}
.am-tip.is-on{opacity:1;}
.am-tip b{display:block;font-weight:700;}
.am-tip span{color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;}

/* --- صفحهٔ ورود ------------------------------------------------------------
   سرِ کارت همان سرمه‌ایِ سایدبار است، تا چیزی که کاربر قبل از ورود می‌بیند
   همان چیزی باشد که بعد از ورود کنارش می‌ماند. پس‌زمینهٔ سرمه‌ایِ صفحه هم یک
   هالهٔ ملایم می‌گیرد تا ورقهٔ تختِ یک‌دست نباشد. */
.login-shell{background:
  radial-gradient(65% 50% at 50% 0%,rgba(111,176,255,.16) 0,transparent 70%),
  var(--am-nav,#151d2b);}
.login-card{padding:0;border-radius:16px;overflow:hidden;}
.login-card::before{display:none;}
.login-card__head{background:var(--am-nav,#151d2b);padding:26px 28px 20px;
  text-align:center;border-bottom:3px solid var(--accent);}
.login-card__head .logo{justify-content:center;font-size:24px;color:#fff;
  margin:0;letter-spacing:-.3px;}
.login-card__sub{margin:7px 0 0;font-size:12px;line-height:1.8;
  color:rgba(255,255,255,.62);}
.login-card__body{padding:26px 28px 28px;}
.login-card input[type=text],.login-card input[type=password]{
  background:var(--surface-2);}
@media (max-width:640px){
  .login-card{padding:0;}
  .login-card__head{padding:22px 20px 17px;}
  .login-card__body{padding:22px 20px 24px;}
}