:root{
  --c-primary:#2563eb;
  --c-muted:#64748b;
  --c-bg:#f8fafc;
  --radius:12px;
  --shadow:0 4px 10px rgba(0,0,0,.05)
}

/* ---------- جدول سرویس‌ها ---------- */
.table-wrap{overflow-x:auto;background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);box-shadow:var(--shadow);margin-top:1rem}
.mhm-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:720px}
.mhm-table thead{background:var(--c-bg)}
.mhm-table th,.mhm-table td{padding:.85rem 1rem;border-bottom:1px solid #e2e8f0;text-align:center}
.mhm-table th{font-weight:600;color:#0f172a}
.mhm-table tr:last-child td{border:none}
.badge{display:inline-block;padding:.25rem .55rem;border-radius:30px;font-size:.75rem}
.badge-ok{background:#49c348;color:#15803d}
.badge-exp{background:#fee2e2;color:#b91c1c}
.badge-warn{
    background:#ffc107;   /* زرد */
    color:#000;
}

/* ---------- دکمه اصلی ---------- */
.btn{background:var(--c-primary);color:#fff;padding:.5rem 1.2rem;border-radius:6px;font-size:.85rem;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(.9)}

/* ---------- کارت‌های داشبورد ---------- */
/* ===== کارت‌ها ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));   /*← پر کردن عرض */
  gap:1rem;            /* فاصله یکنواخت */
  margin-top:1rem;
}

/* موبایل: تک‌ستونی و بدون فضای خالی کنار کارت‌ها */
@media (max-width:640px){
  .cards{grid-template-columns:1fr;}
}

.card{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column}
.card h3{margin:.2rem 0 .8rem;font-size:1.15rem}
.meta{color:var(--c-muted);font-size:.82rem;margin-bottom:.6rem}
.progress{width:100%;height:8px;border-radius:5px;background:#e2e8f0;margin:.6rem 0}
.progress span{display:block;height:100%;border-radius:inherit;background:var(--c-primary)}

/* ---------- فرم کوچک ---------- */
.form-row{display:flex;gap:.5rem;margin-top:1rem}
.form-row input{flex:1;padding:.45rem .6rem;border:1px solid #d1d5db;border-radius:6px;font-size:.85rem}
.form-row button{padding:.45rem 1rem}

/* موبایل: جدول به کارت‌ها تبدیل شود */
@media (max-width:640px){
  .mhm-table          {display:block;width:100%;min-width:0}   /* ← min-width صفر شود */
  .mhm-table thead    {display:none}
  .table-wrap         {border:none;box-shadow:none;overflow:visible}
  .mhm-table tr       {display:block;background:#fff;border:1px solid #e2e8f0;
                       border-radius:var(--radius);margin-bottom:1rem}
  .mhm-table td       {display:flex;justify-content:space-between;
                       padding:.8rem 1rem;border:none;border-bottom:1px solid #e2e8f0}
  .mhm-table td:last-child{border:none}
  .mhm-table td:before{content:attr(data-label);font-weight:600;color:#0f172a}
}


/* ── کارت اطلاعات ورود ─────────────────────── */
.cred{display:flex;flex-direction:column;gap:.65rem;margin-top:.5rem}
.cred-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.cred-item span{width:85px;font-weight:600;color:#334155}
.cred-item input{
  flex:1;background:#f1f5f9;border:1px solid #d1d5db;
  padding:.4rem .6rem;border-radius:6px;font-family:monospace
}
.copy{
  background:#e2e8f0;border:none;display:inline-flex;align-items:center;
  justify-content:center;padding:.45rem;border-radius:6px;cursor:pointer;
  transition:background .15s
}
.copy:hover{background:#cbd5e1}
.copy.copied{background:#34d399}
.copy i{font-size:1rem;color:#475569}

/* ─── چیدمان دو ستونه ───────────────────────── */
.svc-layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:1.5rem;margin-top:1rem}
@media(max-width:800px){.svc-layout{grid-template-columns:1fr}}

/* ─── ستون خلاصه ────────────────────────────── */
.svc-summary{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);
             box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column}
.svc-summary h3{margin-top:0;margin-bottom:.8rem;font-size:1.1rem}
.svc-summary ul{list-style:none;margin:0 0 1rem;padding:0;font-size:.88rem;color:#475569}
.svc-summary li{margin:.3rem 0}
.svc-chart{max-width:220px;margin:1rem auto 0}
.ns-wrap{margin-top:1rem;font-size:.82rem;color:#64748b}
.ns-wrap span{display:inline-block;width:36px;font-weight:600;color:#334155}

/* ─── تب‌ها ─────────────────────────────────── */
.svc-tabs{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);
          box-shadow:var(--shadow);padding:0;overflow:hidden}
.tab-nav{display:flex;border-bottom:1px solid #e2e8f0;margin:0;padding:0;list-style:none}
.tab-nav li{flex:1;text-align:center;padding:.8rem 0;font-size:.9rem;cursor:pointer}
.tab-nav li.is-active{background:var(--c-bg);font-weight:600;color:#0f172a}
.tab-pane{display:none;padding:1.2rem}
.tab-pane.is-active{display:block}

/* ─── فرم استک ──────────────────────────────── */
.form-stack{display:flex;flex-direction:column;gap:.7rem}
.form-stack input{padding:.5rem .7rem;border:1px solid #d1d5db;border-radius:6px;font-size:.88rem}
.form-stack label{font-size:.85rem;color:#475569}

/* ─── هدر صفحه ──────────────────────────────── */
.svc-title{display:flex;align-items:center;gap:.5rem;font-size:1.35rem;margin-top:0}
.svc-title i{font-size:1.25rem;color:var(--c-primary)}


/* ─── روبان مسدود ─────────────────────────── */
.ribbon{display:inline-block;margin-right:.5rem;padding:.1rem .55rem;
        font-size:.74rem;border-radius:4px;color:#fff;vertical-align:middle}
.ribbon-red{background:#dc2626}

/* ─── هشدارها ──────────────────────────────── */
.alert{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;
       border-radius:var(--radius);margin-top:1rem;font-size:.9rem}
.alert i{font-size:1.1rem}
.alert-warn{background:#fff7ed;border:1px solid #fdba74;color:#b45309}
.alert-exp {background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c}
.btn-sm{font-size:.78rem;padding:.35rem .8rem}
.btn-renew{background:#16a34a}
.btn-renew:hover{filter:brightness(.92)}
.mt-2{margin-top:.8rem}

/* ─── انیمیشن تب‌ها (نرم) ─────────────────── */
.tab-pane{opacity:0;transform:translateY(6px);transition:all .25s ease}
.tab-pane.is-active{opacity:1;transform:none}