/* ============================================================
   داشبورد کیوسک — نمایش اجرایی روی مانیتور بزرگ (۸۰ اینچ، اتاق مدیریت)
   ------------------------------------------------------------
   طراحی مستقل و اختصاصی (نه بزرگ‌نمایی صفحات عملیاتی موجود)؛ ثابت روی بوم
   مرجع ۱۹۲۰×۱۰۸۰ ساخته می‌شود و با transform:scale() دقیقاً روی هر رزولوشن
   واقعی مانیتور (کیوسک.js) متناسب‌سازی می‌شود — یعنی چیدمان روی هر صفحه‌نمایشی
   پیکسل‌به‌پیکسل همان است، فقط اندازه‌اش فرق می‌کند. تمِ روشن — طبق درخواست
   کاربر («دارک قشنگ نیست»). رنگ‌های وضعیت (خوب/هشدار/جدی/بحرانی) هیچ‌وقت برای
   غیر وضعیت استفاده نمی‌شوند و همیشه با آیکون+برچسب همراه‌اند، نه فقط رنگ. */

.kd-root {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background: #eef1f6;
  align-items: center; justify-content: center;
  overflow: hidden;
  direction: rtl;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.kd-root.on { display: flex; }

.kd-scale {
  width: 1920px; height: 1080px;
  flex-shrink: 0;
  position: relative;
  transform-origin: center center;
  background: #eef1f6;
}

/* واترمارک بزرگ لوگوی بهساز پشت همه‌ی صحنه‌ها — روی زمینه‌ی روشن نیازی به
   invert نیست: پس‌زمینه‌ی سفیدِ خودِ لوگو با صفحه‌ی روشن یکی می‌شود و فقط
   طرح (چرخ‌دنده+متن) به‌صورت یک شبح خاکستریِ خیلی کم‌رنگ باقی می‌ماند.
   background-image از logo-data.js (همون لوگوی خود برنامه) توسط kiosk.js ست
   می‌شود، نه اینجا، تا داده‌ی لوگو دوباره تکرار نشود. */
.kd-logo-bg {
  position: absolute; inset: 0; z-index: 0;
  background-repeat: no-repeat; background-position: center;
  background-size: 2000px;
  filter: grayscale(1);
  opacity: 0.06;
  pointer-events: none;
}
.kd-scene { z-index: 1; }
.kd-footer-global { z-index: 5; }

/* --- کنترل خروج: در مختصات واقعی صفحه (نه بومِ مقیاس‌شده) تا همیشه اندازه‌ی
   معقول و قابل‌لمس بماند --- */
.kd-exit {
  position: fixed; top: 18px; left: 18px; z-index: 100000;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,32,46,.10);
  color: #42566b;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(20,32,46,.10);
  opacity: .65;
  transition: opacity .2s;
}
.kd-exit:hover { opacity: 1; }
.kd-exit button {
  background: rgba(20,32,46,.06); border: none; color: #14202e;
  padding: 4px 12px; border-radius: 999px; font-family: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.kd-exit button:hover { background: rgba(20,32,46,.12); }
.kd-scene-pos { color: #7c8ea1; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   صحنه‌ها
   ============================================================ */
.kd-scene {
  position: absolute; inset: 0;
  padding: 44px 56px 112px;
  display: flex; flex-direction: column; gap: 30px;
  opacity: 0; pointer-events: none;
  transition: opacity .9s ease;
}
.kd-scene.active { opacity: 1; pointer-events: auto; }

/* --- سربرگ --- */
.kd-header {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 22px;
}
.kd-brand-mark {
  width: 88px; height: 88px; border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(20,32,46,.08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 6px; overflow: hidden;
  box-shadow: 0 6px 20px rgba(20,32,46,.10);
}
.kd-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.kd-brand-text { display: flex; flex-direction: column; gap: 2px; }
.kd-brand-name { font-size: 20px; font-weight: 800; color: #14202e; letter-spacing: .2px; }
.kd-brand-sub { font-size: 14px; font-weight: 600; color: #7c8ea1; }

.kd-scene-title {
  flex: 1;
  font-size: 34px; font-weight: 800; color: #14202e;
  text-align: center;
}

.kd-clockbox { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.kd-clock { font-size: 28px; font-weight: 800; color: #14202e; font-variant-numeric: tabular-nums; }
.kd-date { font-size: 15px; font-weight: 600; color: #7c8ea1; }
.kd-sync { font-size: 12px; font-weight: 700; margin-top: 2px; }
.kd-sync--ok   { color: #0ca30c; }
.kd-sync--warn { color: #c98500; }
.kd-sync--bad  { color: #d03b3b; }

/* --- ردیف KPI --- */
.kd-kpis {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.kd-kpi {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(20,32,46,.08);
  border-inline-end: 5px solid var(--kd-accent, #2a78d6);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 2px 10px rgba(20,32,46,.05);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.kd-kpi-value { font-size: 58px; font-weight: 800; color: #14202e; line-height: 1; font-variant-numeric: tabular-nums; }
.kd-kpi-label { font-size: 16px; font-weight: 700; color: #42566b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kd-kpi--good     { --kd-accent: #0ca30c; }
.kd-kpi--warning  { --kd-accent: #c98500; }
.kd-kpi--serious  { --kd-accent: #c2571f; }
.kd-kpi--critical { --kd-accent: #d03b3b; }
.kd-kpi--accent   { --kd-accent: #2a78d6; }

/* --- بدنه‌ی اصلی: پنل بزرگ لیست/جدول --- */
.kd-body {
  flex: 1; min-height: 0;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(20,32,46,.08);
  border-radius: 20px;
  padding: 26px 30px;
  box-shadow: 0 2px 10px rgba(20,32,46,.05);
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.kd-panel-title {
  flex-shrink: 0;
  font-size: 20px; font-weight: 800; color: #14202e;
  display: flex; align-items: center; gap: 10px;
}
.kd-panel-title .kd-dot { width: 9px; height: 9px; border-radius: 50%; background: #2a78d6; }

.kd-table-wrap { flex: 1; min-height: 0; overflow: hidden; }

/* هشدار: کیوسک بیرون از #main-app است اما همچنان یک <table> ساده است، پس
   قاعده‌های عمومی و بدون‌محدوده‌ی جدول در components.css (table / thead th /
   tbody td / tbody tr:nth-child(even) td) روی آن هم اعمال می‌شوند — بعضی‌هاشان
   (مثل زبرا‌ی ردیف زوج) از نظر specificity حتی از این کلاس هم قوی‌ترند. این‌جا
   صریحاً و با specificity برابر یا بالاتر همه‌ی آن قاعده‌ها بازنویسی می‌شوند. */
.kd-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: transparent; border: none; border-radius: 0; overflow: visible; }
.kd-table thead th {
  text-align: right; font-size: 15px; font-weight: 700; color: #7c8ea1;
  background: transparent;
  padding: 0 14px 12px; border-bottom: 1px solid rgba(20,32,46,.10); border-top: none;
}
.kd-table thead th + th { border-right: none; }
.kd-table tbody td {
  font-size: 21px; font-weight: 600; color: #14202e;
  background: transparent;
  padding: 16px 14px;
  border-top: none; border-bottom: 1px solid rgba(20,32,46,.07);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kd-table tbody tr:first-child td { border-top: none; }
.kd-table tbody tr:last-child td { border-bottom: none; }
.kd-table tbody tr:nth-child(even) td { background: rgba(20,32,46,.025); }
.kd-table tbody tr:hover td,
.kd-table tbody tr:nth-child(even):hover td { background: rgba(20,32,46,.025); }
.kd-table td.kd-c-secondary { color: #42566b; font-weight: 500; }
.kd-table td.kd-c-num { font-variant-numeric: tabular-nums; }

/* حالتی که ردیف با خطر بالا مشخص می‌شود (مثلاً تأخیر خیلی بالا) — با نوار
   کناری، نه رنگ زمینه‌ی کامل، تا شلوغ نشود */
.kd-table tr.kd-row-critical td:first-child { box-shadow: inset 4px 0 0 #d03b3b; }
.kd-table tr.kd-row-warning td:first-child  { box-shadow: inset 4px 0 0 #c98500; }

/* --- نشان وضعیت: همیشه آیکون + برچسب، هیچ‌وقت فقط رنگ ---
   روی زمینه‌ی روشن، برچسب با متنِ تیره‌ترِ همان رنگ خوانا می‌ماند (طبق خودِ
   پالت وضعیت: warning/serious روی سطح روشن به‌تنهایی کنتراست کافی ندارند،
   نقطه‌ی رنگی هویت را می‌رساند و متنِ تیره‌تر خوانایی را) */
.kd-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 16px; font-weight: 700;
  background: var(--kd-pill-bg, rgba(20,32,46,.06));
  border: 1px solid rgba(20,32,46,.08);
}
.kd-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--kd-pill-c, #7c8ea1); flex-shrink: 0; }
.kd-pill--good     { --kd-pill-c: #0ca30c; --kd-pill-bg: #e7f7e7; color: #0ca30c; }
.kd-pill--warning  { --kd-pill-c: #fab219; --kd-pill-bg: #fdf1dc; color: #a86a00; }
.kd-pill--serious  { --kd-pill-c: #ec835a; --kd-pill-bg: #fdeee5; color: #c2571f; }
.kd-pill--critical { --kd-pill-c: #d03b3b; --kd-pill-bg: #fbe9e9; color: #c23a3a; }
.kd-pill--accent   { --kd-pill-c: #2a78d6; --kd-pill-bg: #eaf2fc; color: #184f95; }
.kd-pill--muted    { --kd-pill-c: #9aa6b3; --kd-pill-bg: #eef1f6; color: #5c6b7a; }

.kd-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #9aa6b3;
}

/* --- پاورقی: نقاط پیشرفت چرخش صحنه‌ها ---
   یک عنصر ثابت و مشترک بیرون از خودِ صحنه‌ها (نه تکرارشده داخل هرکدام) تا
   id هر نقطه یکتا بماند و انیمیشن پرشدن همیشه روی همین یک نسخه‌ی واقعاً
   دیده‌شده اجرا شود. روی همان نوار پدینگ پایینیِ صحنه‌ها می‌نشیند. */
.kd-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.kd-footer-global { position: absolute; left: 56px; right: 56px; bottom: 9px; z-index: 5; }
.kd-sdot { width: 9px; height: 42px; border-radius: 999px; background: rgba(20,32,46,.10); overflow: hidden; position: relative; }
.kd-sdot.on { background: rgba(20,32,46,.16); }
.kd-sdot-fill { position: absolute; inset: auto 0 0 0; height: 0%; background: #2a78d6; border-radius: 999px; transition: height linear; }

/* --- نشان روند KPI نسبت به ~۱ ساعت پیش (خنثی، بدون قضاوت خوب/بد) --- */
.kd-trend {
  font-size: 13px; font-weight: 700; color: #7c8ea1;
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.kd-trend--flat { color: #9aa6b3; }
.kd-trend-suf { font-weight: 600; color: #9aa6b3; }

/* --- نوار زنده‌ی آخرین تغییرات — روی همان نوار پدینگ پایینیِ صحنه‌ها،
   بالای نقاط پیشرفت --- */
.kd-ticker-global {
  position: absolute; left: 56px; right: 56px; bottom: 58px; z-index: 5;
  height: 40px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,32,46,.08);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(20,32,46,.05);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  font-size: 14px; font-weight: 600; color: #42566b;
  overflow: hidden; white-space: nowrap;
}
.kd-ticker-live {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: #d03b3b;
}
.kd-ticker-live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #d03b3b;
  animation: kd-live-pulse 1.6s ease-in-out infinite;
}
.kd-ticker-item { flex-shrink: 0; }
.kd-ticker-item--critical { color: #c23a3a; font-weight: 700; }
.kd-ticker-item.kd-ticker-muted { color: #9aa6b3; font-weight: 500; }
.kd-ticker-time { color: #9aa6b3; font-weight: 500; font-size: 12.5px; }
.kd-ticker-sep { flex-shrink: 0; color: #c7cfd8; margin: 0 4px; }

@keyframes kd-live-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* --- چشمک هشدار وقتی یک مورد بحرانی تازه پیدا شود — صرف‌نظر از این‌که
   کیوسک الان روی کدام صحنه است --- */
.kd-scale.kd-alert-flash { animation: kd-alert-ring 1s ease-in-out 6; }
@keyframes kd-alert-ring {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(208,59,59,0); }
  50% { box-shadow: inset 0 0 0 10px rgba(208,59,59,.55); }
}

/* --- حالت کم‌نور خارج از ساعت کاری/تعطیلات — محو نرم، نه یک‌دفعه --- */
.kd-scale { transition: filter 3s ease; }
.kd-scale.kd-quiet-mode { filter: brightness(.34) saturate(.7); }