/*!
 * app.css — اجزای مشترکِ صفحه‌های پنلِ کاربری، روی theme.css ِ panel-kit.
 * فقط چیزهایی که در کیت نیست: مراحلِ ویزارد، جعبهٔ متنِ پیام، زبانه‌ها، بلوکِ کد، حالتِ خالی.
 */

.pk-logo-img { height: 26px; width: auto; }

/* ---------- مراحلِ ویزارد (ارسال پیامک، نظرسنجی، اصالت کالا، خرید خط) ---------- */
.pk-steps { display: flex; list-style: none; margin: 0; padding: 18px 16px 6px; gap: 0; counter-reset: s; }
.pk-steps li { flex: 1; position: relative; text-align: center; color: var(--pk-muted); font-size: 13px; }
.pk-steps li::before {          /* خطِ رابط: از مرکزِ این مرحله تا مرکزِ مرحلهٔ قبلی (سمتِ شروع) */
  content: ""; position: absolute; top: 19px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--pk-line); z-index: 0;
}
.pk-steps li:first-child::before { display: none; }
.pk-steps .pk-step-dot {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--pk-surface); border: 2px solid var(--pk-line);
  color: var(--pk-muted); font-size: 16px; margin-bottom: 6px;
}
.pk-steps .pk-step-label { display: block; }
.pk-steps li.is-done .pk-step-dot { border-color: var(--pk-success); color: var(--pk-success); }
.pk-steps li.is-done::before, .pk-steps li.is-active::before { background: var(--pk-brand); }
.pk-steps li.is-active { color: var(--pk-text-2); font-weight: 500; }
.pk-steps li.is-active .pk-step-dot { background: var(--pk-brand); border-color: var(--pk-brand); color: #fff; }
.pk-step-pane[hidden] { display: none !important; }
@media (max-width: 575.98px) { .pk-steps .pk-step-label { display: none; } }

/* ---------- جعبهٔ متنِ پیام: شمارندهٔ نویسه/پیامک/زبان ---------- */
.pk-msgbox { border: 1px solid var(--pk-line); border-radius: var(--pk-radius-sm); background: var(--pk-surface); }
.pk-msgbox textarea { border: 0; border-radius: var(--pk-radius-sm) var(--pk-radius-sm) 0 0; box-shadow: none !important; resize: vertical; min-height: 140px; }
.pk-msgbox-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-top: 1px dashed var(--pk-line); }
.pk-msgbox-stats { display: flex; justify-content: space-around; text-align: center; padding: 8px 6px; border-top: 1px solid var(--pk-line); background: var(--pk-brand-softer); border-radius: 0 0 var(--pk-radius-sm) var(--pk-radius-sm); font-size: 12px; color: var(--pk-muted); }
.pk-msgbox-stats b { display: block; color: var(--pk-text-2); font-weight: 500; font-size: 13px; margin-top: 2px; }

/* ---------- زبانه‌های داخلِ کارت ---------- */
.pk-tabs { border-bottom: 1px solid var(--pk-line); padding: 0 12px; gap: 2px; flex-wrap: nowrap; overflow-x: auto; }
.pk-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--pk-muted); padding: 10px 12px; white-space: nowrap; font-size: 13px; }
.pk-tabs .nav-link:hover { color: var(--pk-text-2); }
.pk-tabs .nav-link.active { color: var(--pk-brand); border-bottom-color: var(--pk-brand); background: none; }
.pk-tabs .nav-link .badge { margin-inline-start: 4px; }

/* ---------- کارت‌های شمارشی (فیلترِ تیکت‌ها و …) ---------- */
.pk-counter { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--pk-radius); background: var(--pk-surface); box-shadow: var(--pk-shadow); color: var(--pk-text-2); text-decoration: none; height: 100%; }
.pk-counter:hover { color: var(--pk-brand); }
.pk-counter.active { outline: 2px solid var(--pk-brand); }
.pk-counter b { font-size: 18px; font-weight: 500; }
.pk-counter small { display: block; color: var(--pk-muted); }

/* ---------- بلوکِ کد و جدولِ پارامتر (مستندات، وب‌سرویس) ---------- */
.pk-code { direction: ltr; text-align: left; background: #1f2937; color: #e5e7eb; border-radius: var(--pk-radius-sm); padding: 12px 14px; font: 12.5px/1.7 Consolas, Menlo, monospace; overflow-x: auto; margin: 0 0 1rem; white-space: pre; }
.pk-param td:first-child, .pk-param code { direction: ltr; font-family: Consolas, Menlo, monospace; font-size: 12.5px; }
.pk-doc h2 { font-size: 16px; font-weight: 700; margin: 1.6rem 0 .8rem; color: var(--pk-text-2); }
.pk-doc h3 { font-size: 14px; font-weight: 500; margin: 1.2rem 0 .6rem; }
.pk-doc-nav { position: sticky; top: calc(var(--pk-header-h) + 12px); }
.pk-doc-nav a { display: block; padding: 4px 10px; font-size: 13px; color: var(--pk-text-2); text-decoration: none; border-inline-start: 2px solid transparent; }
.pk-doc-nav a.sub { padding-inline-start: 22px; color: var(--pk-muted); font-size: 12.5px; }
.pk-doc-nav a:hover { color: var(--pk-brand); border-inline-start-color: var(--pk-brand); }

/* ---------- حالتِ خالی ---------- */
.pk-empty { text-align: center; color: var(--pk-muted); padding: 36px 12px; }
.pk-empty .fa { font-size: 32px; display: block; margin-bottom: 8px; opacity: .5; }

/* ---------- گزینه‌های کارتی (انتخابِ مبلغِ شارژ، سطح، نوعِ خط) ---------- */
.pk-option { display: block; position: relative; border: 1px solid var(--pk-line); border-radius: var(--pk-radius); padding: 14px; cursor: pointer; background: var(--pk-surface); height: 100%; transition: border-color .15s, box-shadow .15s; }
.pk-option:hover { border-color: var(--pk-brand); }
.pk-option input { position: absolute; opacity: 0; pointer-events: none; }
.pk-option:has(input:checked), .pk-option.active { border-color: var(--pk-brand); box-shadow: 0 0 0 3px var(--pk-brand-soft); }
.pk-option-title { font-weight: 500; color: var(--pk-text-2); }
.pk-option-meta { font-size: 12px; color: var(--pk-muted); }

/* ---------- گفتگوی تیکت ---------- */
.pk-thread { display: flex; flex-direction: column; gap: 12px; }
.pk-msg { border: 1px solid var(--pk-line); border-radius: var(--pk-radius); background: var(--pk-surface); max-width: 85%; }
.pk-msg.is-me { align-self: flex-start; }
.pk-msg.is-staff { align-self: flex-end; background: var(--pk-brand-softer); border-color: var(--pk-brand-soft); }
.pk-msg-head { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--pk-line-soft); font-size: 12.5px; color: var(--pk-muted); }
.pk-msg-head b { color: var(--pk-text-2); font-weight: 500; }
.pk-msg-body { padding: 10px 12px; white-space: pre-line; }

/* ---------- برچسب‌های ورودی (تگ‌ها) ---------- */
.pk-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; padding: 4px 8px; }
.pk-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--pk-brand-soft); color: var(--pk-brand); border-radius: 20px; padding: 2px 10px; font-size: 12px; }
.pk-tag button { border: 0; background: none; color: inherit; padding: 0; line-height: 1; }
.pk-tags input { border: 0; outline: 0; flex: 1; min-width: 120px; font: inherit; }

/* ---------- انتخابِ جستجوپذیر (static/searchable-select.js) ---------- */
/* select ِ اصلی در DOM و فرم می‌ماند (اعتبارسنجی و ارسال) ولی دیده نمی‌شود */
select.ss-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%); }
.ss-toggle { text-align: start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ss-toggle .ss-value { pointer-events: none; }
.ss-menu { position: fixed; z-index: 1090; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 340px; }
.ss-menu .ss-search { padding: 8px; border-bottom: 1px solid var(--pk-line); }
.ss-menu .ss-list { overflow-y: auto; max-height: 280px; padding: 4px 0; }
.ss-menu .dropdown-item { white-space: normal; font-size: 13px; }
.ss-menu .dropdown-item.ss-hover:not(.active) { background: var(--pk-brand-softer, var(--bs-tertiary-bg)); }
.ss-menu .dropdown-item[hidden], .ss-menu .dropdown-header[hidden] { display: none; }

/* ---------- DataTables با scrollX: سرستونِ دوم (اندازه‌گیر) داخلِ بدنهٔ اسکرول باید صفر و نامرئی باشد ----------
   خودِ DataTables این را در CSS ِ خودش دارد که در کیت نیست؛ بی‌این، سرستون دو بار دیده می‌شد. */
div.dt-scroll-body > table > thead > tr,
div.dt-scroll-body > table > thead > tr > th,
div.dt-scroll-body > table > thead > tr > td {
  height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  border-top-width: 0 !important; border-bottom-width: 0 !important; line-height: 0 !important;
}
div.dt-scroll-body > table > thead > tr > th > *,
div.dt-scroll-body > table > thead > tr > th div.dt-scroll-sizing { height: 0 !important; overflow: hidden !important; }
div.dt-scroll-body > table > thead { visibility: collapse; }
div.dt-scroll-body > table > thead .dt-column-order { display: none; }