/* ===== Cardify v3 (RTL, Violet/Pink brand, Auto-Dark) ===== */
:root{
  --brand:#7c3aed;     /* violet */
  --brand-2:#ec4899;   /* pink */
  --surface:#fff;
  --surface-2:#fcfcfd;
  --text:#0f172a;
  --text-2:#334155;
  --muted:#64748b;
  --border:#e5e7eb;

  --ok:#16a34a;   --ok-bg:#e9fce9;
  --warn:#b45309; --warn-bg:#fff7ed;
  --bad:#dc2626;  --bad-bg:#fff1f2;
  --info:#4f46e5; --info-bg:#eef2ff;
}

/* موبایل: کارت‌ها فعال می‌شوند؛ دسکتاپ: جدول کلاسیک */
.cfy-list{ display:none; }
@media (max-width:900px){
  .cfy-list{ display:grid; grid-template-columns:1fr; gap:12px; width:100%; }
  table[data-cardify="1"].cfy-hide-table{ display:none !important; }
  .cfy-hide-box{ display:none !important; }
}

/* کانتینر کارت‌ها (fixed mode) */
.cfy-list{ direction:rtl; width:100%; }

/* کارت */
.cfy-card{
  width:100%;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(124,58,237,.10);
  overflow:hidden;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.cfy-card:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(236,72,153,.18); border-color:#dde3ea; }

/* سرکارت */
.cfy-head{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding:12px 12px 6px 12px;
  align-items:center;
}
.cfy-title{
  font-weight:900; color:var(--text);
  line-height:1.6; font-size:16px;
  display:block;
}
.cfy-title[data-clamp="1"]{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.cfy-title[data-clamp="2"]{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cfy-title[data-clamp="3"]{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ID pill (گوشهٔ چپ بالا در RTL) */
.cfy-idpill{
  position:absolute; inset:10px auto auto 12px;
  background:#f6f7fb; border:1px solid #e9eef5; color:#475569;
  border-radius:999px; padding:4px 10px; font-weight:900; font-size:12px;
}

/* Badges row (اختیاری) */
.cfy-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.cfy-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800;
  border:1px solid transparent; white-space:nowrap;
}
.cfy-badge--ok{    background:var(--ok-bg);   color:var(--ok);   border-color:#bbf7d0; }
.cfy-badge--warn{  background:var(--warn-bg); color:var(--warn); border-color:#ffedd5; }
.cfy-badge--bad{   background:var(--bad-bg);  color:var(--bad);  border-color:#ffe4e6; }
.cfy-badge--info{  background:var(--info-bg); color:var(--info); border-color:#e0e7ff; }
.cfy-badge--gray{  background:#f1f5f9; color:#334155; border-color:#e5e7eb; }

/* خلاصه سطر (K/V با باکس روشن) */
.cfy-summary{
  display:grid; gap:8px; padding:0 12px 10px 12px; grid-template-columns:1fr 1fr; width:100%;
}
.cfy-sum-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0;
  background:#f7f8fb; border:1px solid #eef2f6; border-radius:12px; padding:10px 12px;
}
.cfy-key{ color:var(--muted); font-size:13px; font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.cfy-key .fa-solid{ opacity:.9; font-size:14px; }
.cfy-val{ color:var(--text); font-weight:900; overflow-wrap:anywhere; }

/* جداکننده */
.cfy-sep{ height:1px; background:#eef2f6; margin:0 12px; }

/* اکشن‌ها */
.cfy-actions{
  display:flex; gap:8px; align-items:center; padding:10px 12px; flex-wrap:wrap;
}
.cfy-ico-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; border:1px solid #e5e7eb; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  cursor:pointer; text-decoration:none; transition:transform .12s, filter .12s, border-color .12s;
}
.cfy-ico-btn:hover{ filter:brightness(.97); transform:translateY(-1px); }
.cfy-ico-btn .fa-solid{ font-size:18px; }

/* رنگ اکشن‌ها */
.cfy-action--view{    border-color:#e0e7ff; color:#4f46e5; }
.cfy-action--edit{    border-color:#fde68a; color:#b45309; }
.cfy-action--approve{ border-color:#c7efe4; color:#0e5f4f; }
.cfy-action--reject{  border-color:#ffd1d6; color:#b91c1c; }
.cfy-action--delete{  border-color:#fecdd3; color:#dc2626; }

/* نمایش بیشتر */
.cfy-more{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; cursor:pointer; user-select:none; font-weight:900; color:var(--text);
  width:100%; background:transparent; border:0;
}
.cfy-more .cfy-chevron{ transition:transform .16s; }
.cfy-card.is-open .cfy-more .cfy-chevron{ transform:rotate(180deg); }

/* جزئیات (آکاردئون) */
.cfy-details{
  overflow:hidden; max-height:0; opacity:.0; transition:max-height .24s ease, opacity .2s ease;
  padding:0 12px;
}
.cfy-card.is-open .cfy-details{ padding:8px 12px 12px; max-height:600px; opacity:1; }
.cfy-detail-item{
  display:flex; gap:8px; padding:6px 0; border-bottom:1px dashed #eef2f6; align-items:flex-start;
}
.cfy-detail-item:last-child{ border-bottom:0; }
.cfy-detail-key{ min-width:120px; color:var(--muted); font-size:12px; }
.cfy-detail-val{ flex:1; overflow-wrap:anywhere; }

/* دسترس‌پذیری */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== Carousel Add-on (≤900px) ===== */
.cfy-carousel{ display:none; }
@media (max-width:900px){
  .cfy-carousel{ display:block; }
  table[data-cardify="1"].cfy-hide-table{ display:none !important; }
  .cfy-hide-box{ display:none !important; }
}
.cfy-track{
  direction:ltr;
  display:grid;
  grid-auto-flow: column;
  gap: var(--cfy-gap, 10px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding: 6px 2px 8px;
}
.cfy-track::-webkit-scrollbar{ height:8px }
.cfy-track::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px }
.cfy-slide{
  direction:rtl;
  scroll-snap-align:start;
  min-width: calc((100% - var(--cfy-gap, 10px) * (var(--cpv, 1) - 1)) / var(--cpv, 1));
  max-width: calc((100% - var(--cfy-gap, 10px) * (var(--cpv, 1) - 1)) / var(--cpv, 1));
}
.cfy-slide > .cfy-card{ height:100% }
.cfy-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding: 6px 2px 0;
}
.cfy-prev, .cfy-next{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  cursor:pointer;
  transition:transform .12s, filter .12s, border-color .12s;
}
.cfy-prev:hover, .cfy-next:hover{ transform:translateY(-1px); filter:brightness(.98) }
.cfy-prev .fa-solid, .cfy-next .fa-solid{ font-size:18px; color:var(--text-2); }
.cfy-dots{ display:flex; align-items:center; justify-content:center; gap:6px; }
.cfy-dot{ width:7px; height:7px; border-radius:999px; background:#d1d5db; transition:transform .12s, background .12s; }
.cfy-dot.is-active{ background:var(--brand); transform:scale(1.2); }

/* ===== Dark mode ===== */
@media (prefers-color-scheme: dark){
  :root{
    --surface:#101827; --surface-2:#0f1726;
    --text:#e8eef6; --text-2:#cbd5e1; --muted:#9fb2c9; --border:#22314b;
    --ok-bg:#0b2f1a; --warn-bg:#331f08; --bad-bg:#3a0d12; --info-bg:#11153a;
  }
  .cfy-card{ border-color:#22314b; box-shadow:0 12px 28px rgba(0,0,0,.45); }
  .cfy-sep{ background:#1f2a44; }
  .cfy-summary .cfy-sum-item{ background:#0f1626; border-color:#263449; }
  .cfy-ico-btn{ background:#0f1626; border-color:#263449; }
  .cfy-track::-webkit-scrollbar-thumb{ background:#22314b; }
  .cfy-prev, .cfy-next{ background:#0f1626; border-color:#263449; }
  .cfy-prev .fa-solid, .cfy-next .fa-solid{ color:#cbd5e1; }
  .cfy-dot{ background:#334155 } .cfy-dot.is-active{ background:var(--brand-2) }
}
/* === Webmiz Cardify Fix Pack (Violet/Pink/Navy) ===================== */
/* 1) تم */
:root{ --brand:#7c3aed; --brand-2:#ec4899; }

/* 2) سربرگ کارت: برای قرص شناسه جا باز کن تا با چیپ‌ها تداخل نداشته باشه */
.cfy-head{ padding-left:64px; } /* RTL: قرص شناسه سمت چپ است */
.cfy-idpill{
  background:linear-gradient(180deg,#f3f0ff,#fff0f7);
  border:1px solid #e9e6ff; color:#4338ca; font-weight:900;
}

/* 3) چیپ‌ها/بج‌ها: یک ردیف مرتب؛ اگر زیاد شد، زیر هم بیاد بدون رفتن زیر شناسه */
.cfy-badges{ justify-content:flex-start; gap:8px; row-gap:8px; }

/* 4) باکس‌های خلاصه (K/V): رنگ تم + جلوگیری از شکستن متن‌ها */
.cfy-sum-item{
  min-width:0;
  background:linear-gradient(180deg,#fafbff,#f7f3ff);
  border:1px solid #e9e6ff; border-radius:12px;
}
.cfy-key{ white-space:nowrap; color:#6b7280; font-weight:800; }
.cfy-val{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#0f172a; }

/* 5) در موبایل خیلی کوچک، خلاصه‌ها ستونی بشن تا فشرده نشن */
@media (max-width:420px){
  .cfy-summary{ grid-template-columns:1fr; }
}

/* 6) رنگ دکمه‌های اکشن هماهنگ با تم */
.cfy-ico-btn{ border-color:#e9e6ff; }
.cfy-action--view{    color:#7c3aed; border-color:#e9e6ff; }
.cfy-action--edit{    color:#ec4899; border-color:#ffd1f0; }
.cfy-action--approve{ color:#0e5f4f;  border-color:#c7efe4; }
.cfy-action--reject{  color:#b91c1c;  border-color:#ffd1d6; }
.cfy-action--delete{  color:#dc2626;  border-color:#fecdd3; }

/* 7) چیپ‌های وضعیت — سراسری (از dashboard.css حذف شوند) */
.xx-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800;
  border:1px solid transparent; white-space:nowrap; margin-inline-start:6px;
}
.chip--ok   { background:#e9fce9;  border-color:#bbf7d0; color:#16a34a; }
.chip--warn { background:#fff7ed;  border-color:#ffedd5; color:#b45309; }
.chip--bad  { background:#fff1f2;  border-color:#ffe4e6; color:#dc2626; }
.chip--info { background:#eef2ff;  border-color:#e0e7ff; color:#4f46e5; }
.chip--gray { background:#f1f5f9;  border-color:#e5e7eb; color:#334155; }

/* 8) دارک‌مود هماهنگ */
@media (prefers-color-scheme: dark){
  .cfy-sum-item{ background:#0f1626; border-color:#263449; }
  .cfy-idpill{ background:#111a29; border-color:#22314b; color:#cbd5e1; }
  .xx-chip.chip--ok   { background:#0b2f1a; border-color:#175b3a; color:#86efac; }
  .xx-chip.chip--warn { background:#331f08; border-color:#5a3b14; color:#fbbf24; }
  .xx-chip.chip--bad  { background:#3a0d12; border-color:#5c1a21; color:#f87171; }
  .xx-chip.chip--info { background:#11153a; border-color:#232a73; color:#a5b4fc; }
  .xx-chip.chip--gray { background:#111a29; border-color:#22314b; color:#dbe4ee; }
}
/* ==== Stack summary boxes: one per row (Webmiz standard) ==== */
@media (max-width:900px){
  .cfy-summary{
    display:grid;
    grid-template-columns: 1fr !important; /* قبلاً 1fr 1fr بود؛ حالا تک‌ستونه */
    gap: 10px;
    width: 100%;
  }
  .cfy-sum-item{
    width: 100%;
    min-width: 0;
  }
}
/* === Webmiz Cardify Patch: Dark text fix + Header layout ================= */

/* 1) رنگ متن‌ها را از متغیرهای تم بگیر (نه رنگ ثابت) */
.cfy-card .cfy-title{ color: var(--text); }
.cfy-card .cfy-key{ color: var(--muted); }
.cfy-card .cfy-val{ color: var(--text); }      /* ← قبلاً #0f172a بود، باعث تیرگی در دارک‌مود می‌شد */
.cfy-card .cfy-key .fa-solid{ color: currentColor; opacity:.9; }

/* 2) چیدمان هدر کارت در موبایل: عنوان همیشه بالا، بج‌ها زیر آن
      (دیگر عنوان زیر وضعیت‌ها نمی‌رود) */
@media (max-width:900px){
  .cfy-head{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "badges";
    align-items:start;
    /* اگر ID pill در گوشهٔ چپ است، همان فضای چپ را حفظ کن */
    padding-left:64px;
  }
  .cfy-title{ grid-area: title; }
  .cfy-badges{
    grid-area: badges;
    justify-content:flex-start;
    gap:8px; row-gap:8px;
    margin-top:6px;
  }
}

/* 3) دارک‌مود: فقط مطمئن شو رنگ‌ها از متغیرهای روشن استفاده می‌شود */
@media (prefers-color-scheme: dark){
  .cfy-card .cfy-title{ color: var(--text); }
  .cfy-card .cfy-key{ color: var(--muted); }
  .cfy-card .cfy-val{ color: var(--text); }
}
/* ==== Cardify Carousel Width Fix (Webmiz) ====================== */
/* ستونی‌کردن درستِ اسلایدها در گرید + جلوگیری از باریک شدن */
@media (max-width:900px){
  .cfy-carousel{ --cpv: 1; } /* پیش‌فرض: 1 کارت در هر ویو؛ JS مقدار واقعی را ست می‌کند */

  .cfy-track{
    /* مهم: اندازهٔ ستون‌های ضمنی گرید را صراحتاً تعیین کن */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0,
      calc((100% - var(--cfy-gap,10px) * (var(--cpv,1) - 1)) / var(--cpv,1))
    );
    /* اسکرول بهتر */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }

  /* هر اسلاید دقیقاً به اندازهٔ ستونش باشد و کوچک نشود */
  .cfy-slide{
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    scroll-snap-align: start;
  }
}
/* ==== Cardify Carousel FLEX (Webmiz, stable on mobile) ==== */
@media (max-width:900px){
  /* هاست کاروسل فول‌ویدث */
  .cfy-carousel{ width:100%; }

  /* ریل: به‌جای گرید از فلکس استفاده کن */
  .cfy-track{
    direction:ltr;
    display:flex !important;
    gap: var(--cfy-gap, 10px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding: 6px 2px 8px;
    overscroll-behavior-x: contain;
  }

  /* هر اسلاید = دقیقاً ۱/CPV از پهنای ویو */
  .cfy-slide{
    direction:rtl;
    flex: 0 0 calc((100% - var(--cfy-gap,10px) * (var(--cpv,1) - 1)) / var(--cpv,1)) !important;
    max-width: calc((100% - var(--cfy-gap,10px) * (var(--cpv,1) - 1)) / var(--cpv,1)) !important;
    box-sizing: border-box;
    scroll-snap-align:start;
  }

  /* کارت داخل اسلاید تمام‌قد باشد */
  .cfy-slide > .cfy-card{ height:100%; width:100%; }
}
/* === Webmiz Carousel Nav (brand violet/pink/navy) + proper L/R order === */
@media (max-width:900px){
  /* ترتیب: چپ=Prev ، راست=Next */
  .cfy-nav{
    display:flex;
    flex-direction: row;         /* اجباری: برعکس نشه */
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .cfy-prev{ order:1; }         /* سمت چپ */
  .cfy-dots{ order:2; }
  .cfy-next{ order:3; }         /* سمت راست */

  /* استایل دکمه‌ها با پالت بنفش/صورتی/نِیوی */
  .cfy-prev, .cfy-next{
    background: linear-gradient(180deg, var(--surface), #faf7ff);
    border: 1px solid #e9e6ff;
    box-shadow: 0 8px 20px rgba(124,58,237,.14);
  }
  .cfy-prev .fa-solid, .cfy-next .fa-solid{
    color: var(--brand);         /* بنفش */
    opacity: .95;
  }
  .cfy-prev:hover, .cfy-next:hover{
    transform: translateY(-1px);
    filter: brightness(0.98);
    box-shadow: 0 10px 26px rgba(236,72,153,.18); /* صورتی */
    border-color: #dcd6ff;
  }
  .cfy-prev:active, .cfy-next:active{ transform: translateY(0); }

  /* دات‌ها */
  .cfy-dots{ gap:8px; }
  .cfy-dot{
    width:8px; height:8px; border-radius:999px;
    background:#d1d5db;
    box-shadow: inset 0 0 0 2px rgba(124,58,237,.15);
    transition: transform .12s, background .12s, box-shadow .12s;
  }
  .cfy-dot.is-active{
    background: var(--brand);        /* بنفش */
    box-shadow: 0 0 0 3px rgba(124,58,237,.18), 0 1px 6px rgba(236,72,153,.24);
    transform: scale(1.15);
  }
}

/* دارک‌مود */
@media (prefers-color-scheme: dark){
  .cfy-prev, .cfy-next{
    background:#0f1626;
    border-color:#263449;
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
  }
  .cfy-prev .fa-solid, .cfy-next .fa-solid{ color:#d8b4fe; }  /* بنفش روشن */
  .cfy-dot{ background:#334155; box-shadow: inset 0 0 0 2px rgba(236,72,153,.15); }
  .cfy-dot.is-active{ background: var(--brand-2); box-shadow: 0 0 0 3px rgba(236,72,153,.22); }
}