/* ============== Verna Tickets – 3-cols (eye + status | content | avatar) ============== */
.verna-tickets, .verna-tickets * { box-sizing: border-box; }
.verna-tickets { font-family:"IRANYekan",system-ui; direction:rtl; color:#111827 }

/* Header (اختیاری) */
.vt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.vt-title h2{margin:0 0 4px;font-size:20px;font-weight:800}
.vt-title p{margin:0;font-size:13px;color:#6b7280}
.vt-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:13px;font-weight:700;padding:10px 22px;border:1px solid transparent;text-decoration:none}
.vt-btn.vt-primary{background:#ffdd33;border-color:#facc15;color:#111827}

/* لیست */
.vt-list{margin-top:8px}

/* کارت 3ستونه */
.vt-item{
  position:relative;display:grid;align-items:center;gap:14px;
  grid-template-columns:160px 1fr 100px;  /* چپ | محتوا | راست */
  background:#fff;border:1px solid #e5e7eb;border-radius:18px;
  padding:14px 18px;margin-bottom:10px;box-shadow:0 2px 4px rgba(15,23,42,.03)
}
.vt-item:hover{border-color:#d1d5db;box-shadow:0 10px 20px rgba(148,163,184,.18)}

/* نوار رنگ وضعیت سراسری غیرفعال باشد */
.vt-item::after{content:none}

/* نگاشت رنگ وضعیت (برای استفاده‌های دیگر) */
.status-open::after{background:#3b82f6}
.status-wait::after{background:#f59e0b}
.status-answered::after{background:#10b981}
.status-closed::after{background:#6b7280}

/* ستون چپ: آیکن چشم + باکس وضعیت (هم‌سطح) */
.vt-left{display:flex;flex-direction:row;align-items:center;gap:10px}
.vt-eye{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #d1d5db;background:#fff;color:#374151;text-decoration:none;transition:.16s
}
.vt-eye:hover{background:#f3f4f6}
.vt-status-box{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;border:1px solid transparent;font-size:12px;font-weight:700}
.vt-status-box .dot{width:8px;height:8px;border-radius:999px;background:currentColor;display:inline-block}
.box-open{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}
.box-wait{background:#fff7ed;color:#ea580c;border-color:#fed7aa}
.box-answered{background:#ecfdf3;color:#16a34a;border-color:#bbf7d0}
.box-closed{background:#f3f4f6;color:#6b7280;border-color:#d1d5db}

/* ستون میانی: عنوان + ردیف ۴تایی متادیتا (بدون خلاصه) */
.vt-content{display:flex;flex-direction:column;gap:8px}
.vt-title{margin:0;font-size:16px;font-weight:400;color:#111827;text-align:right}
.vt-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vt-meta-chip{display:flex;align-items:center;gap:6px;font-size:12px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-meta-chip .lbl{color:#6b7280}
.vt-snippet{display:none !important}

/* ستون راست: آواتار کنار ریل کوتاه وضعیت */
.vt-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.vt-rail{
  width:6px;height:42px;border-radius:8px;
  margin-inline-start:8px; /* کمی فاصله از لبه راست کارت */
  background:#3b82f6; /* پیش‌فرض */
}
/* رنگ ریل براساس وضعیت */
.status-open .vt-rail{background:#3b82f6}
.status-wait .vt-rail,
.status-waiting .vt-rail{background:#f59e0b}
.status-answered .vt-rail{background:#10b981}
.status-closed .vt-rail{background:#6b7280}

/* آواتار سمت راست کنار ریل */
.vt-avatar-wrap{display:flex;align-items:center;justify-content:center}
.vt-avatar-img,.vt-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:#e5e7eb}
.vt-avatar-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ریسپانسیو */
@media (max-width:1100px){
  .vt-item{grid-template-columns:1fr;row-gap:10px}
  .vt-left{flex-direction:row}
  .vt-right{justify-content:flex-start}
  .vt-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .vt-meta-grid{grid-template-columns:1fr}
}

/* ====== کارت‌های وضعیت بالای لیست (استایل هماهنگ با کارت‌ها) ====== */
.vt-cards{display:grid;gap:12px;grid-template-columns:repeat(6,minmax(0,1fr));margin:14px 0}
@media (max-width:1100px){ .vt-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .vt-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.vt-card{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:12px 14px;box-shadow:0 2px 4px rgba(15,23,42,.03);text-decoration:none;color:inherit}
.vt-card:hover{border-color:#d1d5db;box-shadow:0 10px 20px rgba(148,163,184,.18)}
.vt-card .label{color:#6b7280;font-size:12px}
.vt-card .value{font-size:16px;font-weight:800}
.vt-card-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#f9fafb}
.vt-card.vt-click{cursor:pointer;transition:all .2s ease}
.vt-card.vt-click.active{border:2px solid #ffdd33;background:#fffde7}
.vt-card.status-open .vt-card-icon{color:#2563eb}
.vt-card.status-waiting .vt-card-icon{color:#f59e0b}
.vt-card.status-answered .vt-card-icon{color:#16a34a}
.vt-card.status-closed .vt-card-icon{color:#6b7280}
.vt-card.status-finished .vt-card-icon{color:#ca8a04}


/* === Verna fix: enforce columns (eye+status on left, avatar+rail on right) === */
.verna-tickets .vt-item{
  grid-template-columns:200px 1fr 100px !important;
  grid-template-areas:"left content right";
  direction:ltr; /* keep physical columns fixed irrespective of RTL */
}
.verna-tickets .vt-left{ grid-area:left !important; }
.verna-tickets .vt-content{ grid-area:content !important; direction:rtl; }
.verna-tickets .vt-right{ grid-area:right !important; }

/* ensure rail sits near right edge inside right column */
.verna-tickets .vt-right .vt-rail{ margin:0 0 0 8px; }

/* Responsive stacking: keep order left -> content -> right on small screens */
@media (max-width:1100px){
  .verna-tickets .vt-item{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "left"
      "content"
      "right";
  }
  .verna-tickets .vt-right{ justify-content:flex-start; }
}


/* svg fallback inside empty avatar */
.vt-avatar svg{ width:70%; height:70%; display:block }