/*!
 * ================================================================
 *  ریفر ترک — لایهٔ اصلاح (Refine Layer)
 * ================================================================
 *  بعد از panel.css و dashboard.css می‌آید و فقط چند جای مشخص را
 *  قطعی می‌کند؛ چیزی حذف یا جابه‌جا نمی‌شود.
 *
 *   ۱) دونات وضعیت ناوگان: اندازه‌اش دیگر از عرض کارت تبعیت نمی‌کند،
 *      پس نه از کارت بیرون می‌زند و نه وسط صفحه پخش می‌شود.
 *   ۲) راهنمای کنار دونات: یک ستون مرتب، بدون شکستن روی موبایل.
 *   ۳) چند محافظ سرریز برای SVG و جدول‌ها.
 * ================================================================
 */

/* ───────── ۱) دونات وضعیت ناوگان ─────────
   نام‌ها عمداً یکتا هستند (rxd-) تا هیچ قاعده‌ای از فایل‌های دیگر روی
   اندازه یا چرخش نمودار اثر نگذارد. همه‌چیز اینجا قطعی است. */
.rxd-wrap{
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; width:100%; padding:2px 0;
}

.rxd-donut{
  flex:0 0 auto;
  width:clamp(140px, 40%, 176px);
  aspect-ratio:1 / 1; height:auto;
  padding:0; margin:0; border:0; background:transparent;
  color:inherit; cursor:pointer; line-height:0; display:block;
  transition:transform .3s cubic-bezier(.34,1.46,.64,1), filter .3s ease;
}
.rxd-donut:hover{transform:scale(1.03); filter:drop-shadow(0 10px 22px rgba(0,212,184,.28))}
.rxd-donut:active{transform:scale(.99)}
.rxd-donut:focus-visible{outline:2px solid var(--teal,#00D4B8); outline-offset:4px; border-radius:50%}
.rxd-donut svg{display:block; width:100%; height:100%; overflow:visible}

.rxd-arc{cursor:pointer; transition:opacity .22s ease, stroke-width .22s ease}
.rxd-donut:hover .rxd-arc{opacity:.5}
.rxd-donut .rxd-arc:hover,.rxd-donut .rxd-arc:focus-visible{opacity:1; stroke-width:5.6; outline:none}

/* ───────── ۲) راهنمای وضعیت‌ها ───────── */
.rxd-legend{
  flex:1 1 230px; min-width:0; max-width:100%;
  display:flex; flex-direction:column; gap:2px; align-self:center;
}
.rxd-row{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:6px 8px; border:0; border-radius:10px;
  background:transparent; color:inherit; font:inherit; cursor:pointer;
  text-align:start; transition:background-color .2s ease, transform .2s ease;
}
.rxd-row:hover{background:rgba(140,160,188,.10); transform:translateX(2px)}
[dir="rtl"] .rxd-row:hover{transform:translateX(-2px)}
.rxd-row i{flex:0 0 auto; width:9px; height:9px; border-radius:3px; display:block}
.rxd-row span{
  flex:1 1 auto; min-width:0; font-size:12.5px; opacity:.9;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rxd-row b{flex:0 0 auto; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums}
.rxd-row em{
  flex:0 0 auto; font-style:normal; font-size:11.5px; opacity:.55;
  min-width:40px; text-align:end; font-variant-numeric:tabular-nums;
}

@media (max-width: 760px){
  .rxd-wrap{gap:12px}
  .rxd-donut{width:clamp(132px, 56%, 168px)}
  .rxd-legend{flex-basis:100%}
  .rxd-row{padding:7px 8px}
  .rxd-row span{font-size:12px}
}

/* اگر جایی هنوز قالب کش‌شدهٔ قدیمی رندر شد، دونات قدیمی هم مهار می‌شود */
.dx-donutwrap{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap}
.dx-donutwrap .dx-donut{flex:0 0 auto; width:clamp(140px,40%,176px); aspect-ratio:1/1; height:auto; padding:0; border:0; background:transparent}
.dx-donutwrap .dx-donut svg{display:block; width:100%; height:100%}
.dx-donutwrap .dx-legend{flex:1 1 230px; min-width:0}

/* ───────── ۳) محافظ‌های سرریز ───────── */
.dx-card svg,.card svg,.rf-card svg,.op-panel svg{max-width:100%}
.dx-bd,.dx-card{min-width:0}
.dx-grid > *{min-width:0}
.tscroll,.op-tw,.mt-tw,.in-tw,.nx-tw,.rf-tw,.dxm-tw{max-width:100%}

/* اعداد جدول‌ها و کارت‌ها هم‌عرض بمانند تا موقع شمارش نلرزند */
.num,.k-v,.s-v,.b-v,.p-v{font-variant-numeric:tabular-nums}

/* ───────── ۴) محافظ اندازهٔ رسانه ───────── */
img,canvas,iframe{max-width:100%}
img{height:auto}

/* ───────── ۵) فهرست کارتیِ بازرسی‌ها ─────────
   کارت‌های بازرسی ارتفاع‌های خیلی متفاوتی دارند (یکی دو خط متن، یکی
   چک‌لیست کامل PTI). در یک شبکهٔ سطر-محور، بلندترین کارتِ هر سطر ارتفاع
   کل سطر را تعیین می‌کند و زیر بقیه حفره می‌ماند — همان فضای خالی بزرگ
   وسط صفحه. با ستون‌بندی، هر کارت دقیقاً به اندازهٔ خودش جا می‌گیرد و
   کارت بعدی بلافاصله زیرش می‌نشیند. */
.in-grid{
  display:block !important;
  columns:320px 3 !important;
  column-gap:12px;
  align-items:start;
}
.in-grid > *{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  width:100%;
  margin:0 0 12px;
}
@media (max-width: 1180px){ .in-grid{columns:300px 2 !important} }
@media (max-width: 720px){  .in-grid{columns:1 !important} }

/* داخل ستون‌بندی، جابه‌جایی سه‌بعدی گاهی لرزش رنگ می‌سازد؛ کارت بازرسی
   فقط محو می‌شود. */
.in-grid > [data-rx].rx-in{animation-name:rx-fade}

/* متن بلند هرگز از کارت بیرون نزند */
.in-card{min-width:0}
.in-card .in-body{
  overflow:hidden; white-space:normal;
  overflow-wrap:anywhere; word-break:break-word;
}
.in-card .in-head,.in-card .in-h1,.in-card .in-h2,.in-card .in-top{min-width:0}
.in-card .in-h2 span,.in-card .in-cno{overflow-wrap:anywhere}
.in-card .in-badges,.in-card .c-list,.in-card .in-meta,.in-card .in-shots{flex-wrap:wrap}
.in-card .in-review input{min-width:0}

/* ───────── ۶) جدول‌های بلند: نوار جستجو و صفحه‌بندی ─────────
   موتور جدول (motion.js) این عناصر را برای هر جعبهٔ data-rxt می‌سازد. */
.rxt-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--line,#1E2A3D);
}
.rxt-ic{opacity:.45; font-size:13px; line-height:1}
.rxt-q{
  flex:1 1 200px; min-width:0; font:inherit; font-size:13px; color:inherit;
  background:rgba(140,160,188,.07); border:1px solid var(--line,#1E2A3D);
  border-radius:10px; padding:7px 11px; transition:border-color .2s, box-shadow .2s;
}
.rxt-q::placeholder{opacity:.45}
.rxt-q:focus{outline:none; border-color:var(--teal,#00D4B8); box-shadow:0 0 0 3px rgba(0,212,184,.15)}
.rxt-sp{flex:1 1 auto}
.rxt-count{font-size:12px; opacity:.6; white-space:nowrap; font-variant-numeric:tabular-nums}
.rxt-per{
  font:inherit; font-size:12.5px; color:inherit; cursor:pointer;
  background:rgba(140,160,188,.07); border:1px solid var(--line,#1E2A3D);
  border-radius:10px; padding:6px 9px;
}
.rxt-per:focus{outline:none; border-color:var(--teal,#00D4B8)}

.rxt-pager{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  padding:10px 12px; border-top:1px solid var(--line,#1E2A3D);
}
.rxt-pager[hidden]{display:none}
.rxt-btn{
  font:inherit; font-size:12.5px; color:inherit; cursor:pointer;
  background:transparent; border:1px solid var(--line,#1E2A3D);
  border-radius:9px; padding:6px 13px; min-width:38px;
  transition:transform .18s cubic-bezier(.34,1.46,.64,1), border-color .2s, background-color .2s;
}
.rxt-btn:hover:not(:disabled){border-color:var(--teal,#00D4B8); background:rgba(0,212,184,.08); transform:translateY(-1px)}
.rxt-btn:active:not(:disabled){transform:scale(.95)}
.rxt-btn:disabled{opacity:.32; cursor:default}
.rxt-pages{font-size:12.5px; opacity:.7; padding:0 8px; white-space:nowrap}
.rxt-empty{padding:26px 14px; text-align:center; opacity:.55; font-size:13px}
.rxt-empty[hidden]{display:none}

@media (max-width: 560px){
  .rxt-q{flex:1 1 100%}
  .rxt-count{order:3; width:100%; text-align:center}
  .rxt-btn{padding:6px 10px}
}

/* ───────── ۷) جدول «بدون موقعیت» در نقشه ─────────
   فقط ستون کانتینر: محتوایش به لبهٔ شروع (راست در فارسی) می‌چسبد تا زیر
   عنوان خودش بنشیند. عرض ستون‌ها و بقیهٔ جدول دست‌نخورده می‌ماند. */
.rxm-table th:first-child,
.rxm-table td:first-child{text-align:right !important}
[dir="ltr"] .rxm-table th:first-child,
[dir="ltr"] .rxm-table td:first-child{text-align:left !important}

.rxm-table td:first-child{
  font-weight:600; letter-spacing:.3px; white-space:nowrap;
  direction:ltr; unicode-bidi:isolate;
}
.rxm-table .rxm-act .btn{white-space:nowrap}

/* در نمای موبایل که ردیف به کارت تبدیل می‌شود، همان قاعدهٔ خود پنل بماند */
@media (max-width: 700px){
  .rxm-table th:first-child,
  .rxm-table td:first-child{text-align:start !important}
}