/*!
 * 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%; }
/* پیامِ تیکت تمام‌عرض، هم‌اندازهٔ کادرِ پاسخ (خواستِ صاحب پروژه ۱۴۰۵/۰۷/۲۸)؛ گفتگوها (is-in/is-out) حباب می‌مانند */
.pk-msg.is-me, .pk-msg.is-staff { width: 100%; max-width: 100%; }
.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: 12px 14px; white-space: pre-line; font-size: 14px; line-height: 1.9; min-height: 64px; }

/* ---------- برچسب‌های ورودی (تگ‌ها) ---------- */
.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; }

/* یک نوارِ اسکرول (خواستِ صاحب پروژه ۱۴۰۵/۰۷/۲۳): کیت منوی کناری را ثابت با اسکرولِ جدا می‌گذارد و html همیشه نوار دارد
   ⇒ دو نوارِ کنارِ هم. حالا فقط نوارِ خودِ صفحه (کنارِ منو)؛ منو با صفحه بالا می‌رود؛ صفحهٔ کوتاه بی‌نوار.
   ظرفِ منو body است (position: relative) تا ستونِ منو تا انتهای صفحه کشیده شود. */
html { overflow-y: auto; }
@media (min-width: 992px) {
  body { position: relative; }
  .pk-sidebar { position: absolute !important; bottom: auto; min-height: calc(100% - var(--pk-header-h)); overflow: visible; }
}

/* فرمِ LBA: پیش‌شماره‌ها در سه فهرستِ کشوییِ تیک‌دار (یکی برای هر اپراتور) */
.pk-pf-btn { min-width: 190px; }
.pk-pf-menu { min-width: 190px; max-height: 300px; overflow-y: auto; }

/* ارسالِ مکان‌محور: نقشهٔ map.webservice.ir و دایرهٔ شعاع (templates/pages/send/lba.html) */
.lba-map-box { position: relative; height: 360px; border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; background: #e8edef; }
.lba-map { position: absolute; inset: 0; }
.lba-map-zoom { position: absolute; top: 10px; left: 10px; z-index: 8; display: flex; flex-direction: column; gap: 6px; }
.lba-map-zoom .btn { width: 34px; height: 34px; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.lba-map-hint { position: absolute; top: 10px; right: 10px; z-index: 8; background: rgba(255,255,255,.92); border-radius: .4rem; padding: 4px 10px; font-size: .8125rem; box-shadow: 0 1px 4px rgba(0,0,0,.12); pointer-events: none; }
.lba-map-svg { position: absolute; top: 0; left: 0; z-index: 4; pointer-events: none; overflow: visible; }
.lba-shape { fill: rgba(31,95,174,.16); stroke: #1f5fae; stroke-width: 2; stroke-linejoin: round; }
polyline.lba-shape { fill: none; stroke-dasharray: 6 4; }
.lba-shape-bad { fill: rgba(220,38,38,.14); stroke: #dc2626; }
.lba-vertex { fill: #fff; stroke: #1f5fae; stroke-width: 2; }
.lba-map-tools { position: absolute; bottom: 10px; right: 10px; z-index: 8; display: flex; gap: 6px; flex-wrap: wrap; }
.lba-map-tools .btn { box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.lba-poly .tm-pin { display: none !important; }
.lba-poly .lba-map { cursor: crosshair !important; }
.lba-map-show { height: 280px; margin-top: 1rem; }
@media (max-width: 575.98px) { .lba-map-box { height: 300px; } }

/* وب‌سرویس REST: آی‌پی‌های مجاز (templates/pages/web_services/rest.html) */
.ws-ip-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ws-ip-field { flex: 1 1 220px; min-width: 0; }
.ws-ip-add .btn { flex: 0 0 auto; }
.ws-ip-checks { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.ws-ip-check { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 8px 12px; cursor: pointer; }
.ws-ip-check:has(input:checked) { border-color: var(--pk-brand); background: var(--pk-brand-soft); }
.ws-ip-check .form-check-input { margin: 0; flex: 0 0 auto; }

/* فهرستِ تیک‌دارِ گروه‌ها (جای select ِ چندتاییِ Ctrl‌دار؛ روی گوشی هم کار می‌کند) */
.pk-checks { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.pk-check { display: flex; align-items: center; gap: 10px; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 8px 12px; cursor: pointer; margin: 0; }
.pk-check:has(input:checked) { border-color: var(--pk-brand); background: var(--pk-brand-soft); }
.pk-check .form-check-input { margin: 0; flex: 0 0 auto; }
.pk-check small { margin-inline-start: auto; color: var(--pk-muted); }