/* ============================================================
   Secaas Registration v2.15.0 — رابط کاربری صفحات پنل
   «جستجوی سراسری» و «وضعیت سرویس» (کال‌سنتر / نماینده)
   هماهنگ با تم افزونه: آبی سازمانی #004d99 و نارنجی #fd8d01
   همه کلاس‌ها با پیشوند secaas-x- (بدون تداخل با قالب سایت)
   ============================================================ */

.secaas-x {
    --x-blue: var(--sc-blue, #004d99);
    --x-blue-dark: var(--sc-blue-dark, #003a75);
    --x-blue-soft: var(--sc-blue-soft, #e8f0f9);
    --x-orange: var(--sc-orange, #fd8d01);
    --x-orange-dark: var(--sc-orange-dark, #d97800);
    --x-orange-soft: var(--sc-orange-soft, #fff3e3);
    --x-ink: var(--sc-ink, #1f2333);
    --x-muted: var(--sc-muted, #6b7188);
    --x-border: var(--sc-border, #d7dce8);
    --x-line: #edf0f6;
    --x-bg: var(--sc-bg, #f6f8fb);
    --x-green: var(--sc-green, #0f8a4d);
    --x-green-soft: var(--sc-green-soft, #e7f6ee);
    --x-red: var(--sc-red, #d33c3c);
    --x-red-soft: var(--sc-red-soft, #fdeaea);
    --x-amber: #b45309;
    --x-amber-soft: #fef3c7;
    --x-radius: var(--sc-radius, 12px);
    --x-font: var(--sc-font, "Vazirmatn", "IRANSans", Tahoma, sans-serif);

    max-width: 1180px;
    margin: 20px auto 32px;
    direction: rtl;
    font-family: var(--x-font);
    color: var(--x-ink);
    font-size: 14px;
    line-height: 1.7;
}

.secaas-x *,
.secaas-x *::before,
.secaas-x *::after {
    box-sizing: border-box;
}

.secaas-x a {
    text-decoration: none;
}

/* ---------- سربرگ صفحه ---------- */

.secaas-x-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.secaas-x-head-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--x-blue-soft);
    color: var(--x-blue);
    display: grid;
    place-items: center;
}

.secaas-x-head-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--x-ink);
}

.secaas-x-head-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--x-muted);
}

.secaas-x-readonly {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--x-bg);
    border: 1px solid var(--x-border);
    color: var(--x-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* ---------- تب‌های بخش (Segmented) ---------- */

.secaas-x-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--x-bg);
    border: 1px solid var(--x-border);
    border-radius: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.secaas-x-tabs::-webkit-scrollbar {
    display: none;
}

.secaas-x-tab {
    flex: 1 1 0;
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    color: var(--x-muted) !important;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
}

.secaas-x-tab:hover {
    color: var(--x-ink) !important;
    background: rgba(255, 255, 255, .6);
}

.secaas-x-tab.is-active {
    background: #fff;
    color: var(--x-blue) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 0 0 1px var(--x-border);
}

.secaas-x-tab-count {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e3e7f0;
    color: var(--x-muted);
    font-size: 11.5px;
    line-height: 20px;
    text-align: center;
}

.secaas-x-tab.is-active .secaas-x-tab-count {
    background: var(--x-blue-soft);
    color: var(--x-blue);
}

/* ---------- پنل (کارت) ---------- */

.secaas-x-panel {
    background: #fff;
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius);
    overflow: hidden;
}

.secaas-x-panel + .secaas-x-panel {
    margin-top: 16px;
}

.secaas-x-panel-body {
    padding: 18px;
}

/* ---------- کارت‌های آمار (فیلتر سریع) ---------- */

.secaas-x-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.secaas-x-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--x-border);
    border-radius: 12px;
    color: var(--x-ink) !important;
    transition: border-color .15s, box-shadow .15s;
}

.secaas-x-stat:hover {
    border-color: #b8c3d9;
}

.secaas-x-stat.is-active {
    border-color: var(--x-blue);
    box-shadow: 0 0 0 3px rgba(0, 77, 153, .12);
}

.secaas-x-stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--x-muted);
}

.secaas-x-stat-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
}

/* ---------- نوار فیلتر ---------- */

.secaas-x-filters {
    padding: 16px 18px;
    border-bottom: 1px solid var(--x-line);
    background: #fcfdfe;
}

.secaas-x-searchbar {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.secaas-x-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.secaas-x-search .secaas-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 13px;
    transform: translateY(-50%);
    color: #9aa1b6;
    pointer-events: none;
}

.secaas-x .secaas-x-search input[type="search"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    padding-inline-start: 40px;
    border: 1px solid var(--x-border);
    border-radius: 10px;
    background: #fff !important;
    color: var(--x-ink) !important;
    -webkit-text-fill-color: var(--x-ink) !important;
    font-family: var(--x-font);
    font-size: 14px;
    box-shadow: none !important;
    outline: none;
    margin: 0;
}

.secaas-x-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px 12px;
    margin-top: 12px;
}

.secaas-x-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.secaas-x-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--x-muted);
    margin: 0;
}

.secaas-x .secaas-x-field select,
.secaas-x .secaas-x-field input[type="date"],
.secaas-x .secaas-x-field input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--x-border);
    border-radius: 9px;
    background-color: #fff !important;
    color: var(--x-ink) !important;
    -webkit-text-fill-color: var(--x-ink) !important;
    font-family: var(--x-font);
    font-size: 13.5px;
    box-shadow: none !important;
    outline: none;
    margin: 0;
}

.secaas-x .secaas-x-field input[type="date"] {
    direction: ltr;
    text-align: right;
}

.secaas-x .secaas-x-search input:focus,
.secaas-x .secaas-x-field select:focus,
.secaas-x .secaas-x-field input:focus {
    border-color: var(--x-blue);
    outline: 3px solid rgba(0, 77, 153, .13);
    outline-offset: 0;
}

.secaas-x-filters-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* ---------- دکمه‌ها ---------- */

.secaas-x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: var(--x-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}

.secaas-x-btn--primary {
    background: var(--x-blue);
    color: #fff !important;
}

.secaas-x-btn--primary:hover {
    background: var(--x-blue-dark);
}

.secaas-x-btn--ghost {
    height: 36px;
    padding: 0 14px;
    background: #fff;
    border-color: var(--x-border);
    color: #3b4256 !important;
    font-size: 13px;
}

.secaas-x-btn--ghost:hover {
    background: var(--x-bg);
}

.secaas-x-btn.is-loading {
    opacity: .75;
    pointer-events: none;
}

.secaas-x-btn.is-loading .secaas-icon {
    animation: secaas-x-spin .8s linear infinite;
}

@keyframes secaas-x-spin {
    to { transform: rotate(360deg); }
}

.secaas-x-btn--sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

.secaas-x-btn--soft {
    background: var(--x-blue-soft);
    color: var(--x-blue) !important;
}

.secaas-x-btn--soft:hover {
    background: #d6e4f4;
}

.secaas-x-btn--soft:disabled {
    opacity: .6;
    cursor: wait;
}

/* ---------- چیپ‌های فیلتر فعال ---------- */

.secaas-x-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.secaas-x-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    padding-inline-start: 10px;
    padding-inline-end: 6px;
    border-radius: 999px;
    background: var(--x-blue-soft);
    color: var(--x-blue-dark) !important;
    font-size: 12px;
    font-weight: 700;
}

.secaas-x-chip-x {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 77, 153, .12);
    font-size: 14px;
    line-height: 1;
}

.secaas-x-chip:hover .secaas-x-chip-x {
    background: var(--x-blue);
    color: #fff;
}

.secaas-x-chips-reset {
    font-size: 12px;
    color: var(--x-red) !important;
    padding: 0 4px;
}

/* ---------- نوار نتیجه ---------- */

.secaas-x-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-bottom: 1px solid var(--x-line);
    font-size: 13px;
    color: var(--x-muted);
}

.secaas-x-resultbar b {
    color: var(--x-ink);
    font-weight: 800;
}

.secaas-x-sum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--x-green-soft);
    color: var(--x-green);
    font-weight: 700;
}

/* ---------- جدول ---------- */

.secaas-x-table-wrap {
    overflow-x: auto;
}

.secaas-x-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    margin: 0;
}

.secaas-x-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f9fc;
    color: var(--x-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
    padding: 10px 14px;
    border-bottom: 1px solid var(--x-border);
    white-space: nowrap;
}

.secaas-x-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--x-line);
    vertical-align: middle;
    color: var(--x-ink);
    background: #fff;
}

.secaas-x-table tbody tr:last-child td {
    border-bottom: 0;
}

.secaas-x-table tbody tr:hover td {
    background: #fafbfe;
}

.secaas-x-table .is-num {
    white-space: nowrap;
}

.secaas-x-table .is-end {
    text-align: left;
    white-space: nowrap;
}

.secaas-x-id {
    color: var(--x-muted);
    font-size: 12px;
    white-space: nowrap;
}

.secaas-x-strong {
    font-weight: 700;
}

.secaas-x-sub {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--x-muted);
    line-height: 1.5;
}

.secaas-x-none {
    color: #b3b8c8;
}

.secaas-x-date {
    display: block;
    white-space: nowrap;
}

/* ردیف جزئیات (وضعیت و مصرف / جزئیات درخواست) */
.secaas-x-table .secaas-pin-detail-row > td,
.secaas-x-table tr.secaas-x-detail > td {
    background: #f8fafc !important;
    padding: 14px 18px;
}

.secaas-x-table .secaas-pin-detail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 24px;
}

.secaas-x-table .secaas-pin-detail-error {
    display: block;
}

.secaas-x-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 24px;
    font-size: 13px;
}

.secaas-x-detail-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed #e3e7ef;
}

.secaas-x-detail-grid span {
    color: var(--x-muted);
}

/* ---------- بج‌های وضعیت ---------- */

.secaas-x-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.6;
}

.secaas-x-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.secaas-x-badge--success { background: var(--x-green-soft); color: var(--x-green); }
.secaas-x-badge--warning { background: var(--x-amber-soft); color: var(--x-amber); }
.secaas-x-badge--danger  { background: var(--x-red-soft); color: var(--x-red); }
.secaas-x-badge--info    { background: var(--x-blue-soft); color: var(--x-blue); }
.secaas-x-badge--muted   { background: #eef0f5; color: #5d6479; }

.secaas-x-sale {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.secaas-x-sale--online   { background: var(--x-orange-soft); color: var(--x-orange-dark); }
.secaas-x-sale--reseller { background: var(--x-blue-soft); color: var(--x-blue); }

/* ---------- کد + کپی ---------- */

.secaas-x-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 6px;
    background: var(--x-bg);
    border: 1px solid #e6e9f1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .2px;
    white-space: nowrap;
    direction: ltr;
}

.secaas-x-copy {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #9aa1b6;
    cursor: pointer;
}

.secaas-x-copy:hover {
    background: #e3e8f1;
    color: var(--x-blue);
}

.secaas-x-copy.is-copied {
    color: var(--x-green);
}

/* ---------- پیوند/دکمه کوچک ---------- */

.secaas-x-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--x-blue) !important;
    font-size: 12.5px;
    font-weight: 700;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--x-font);
}

.secaas-x-link:hover {
    color: var(--x-blue-dark) !important;
    text-decoration: underline;
}

/* ---------- حالت خالی ---------- */

.secaas-x-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 16px;
    text-align: center;
}

.secaas-x-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--x-bg);
    color: #9aa1b6;
    margin-bottom: 6px;
}

.secaas-x-empty-title {
    font-weight: 800;
    font-size: 15px;
}

.secaas-x-empty-hint {
    color: var(--x-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

/* ---------- صفحه‌بندی ---------- */

.secaas-x-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-top: 1px solid var(--x-line);
    font-size: 12.5px;
    color: var(--x-muted);
}

.secaas-x-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.secaas-x-page {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--x-border);
    background: #fff;
    color: #3b4256 !important;
    font-size: 13px;
    font-weight: 700;
}

a.secaas-x-page:hover {
    border-color: var(--x-blue);
    color: var(--x-blue) !important;
}

.secaas-x-page.is-current {
    background: var(--x-blue);
    border-color: var(--x-blue);
    color: #fff !important;
}

.secaas-x-page.is-disabled {
    opacity: .4;
}

.secaas-x-page-gap {
    padding: 0 2px;
    color: var(--x-muted);
}

/* ---------- پیام خطا ---------- */

.secaas-x-alert {
    margin: 16px 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--x-red-soft);
    color: #9f2a2a;
    font-size: 13px;
}

.secaas-x-alert code {
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
}

/* ---------- استعلام وضعیت (کارت داخل تب) ---------- */

.secaas-x .secaas-x-inquiry {
    max-width: 560px;
    margin: 0 auto;
}

.secaas-x .secaas-x-inquiry .secaas-container {
    margin: 0;
    max-width: none;
}

/* ---------- موبایل: جدول به کارت ---------- */

@media (max-width: 760px) {

    .secaas-x {
        margin-top: 12px;
    }

    .secaas-x-head-icon {
        width: 40px;
        height: 40px;
    }

    .secaas-x-head-title {
        font-size: 17px;
    }

    .secaas-x-readonly {
        display: none;
    }

    .secaas-x-tab {
        flex: 1 0 auto;
        padding: 8px 12px;
        font-size: 13px;
    }

    .secaas-x-panel-body,
    .secaas-x-filters,
    .secaas-x-resultbar,
    .secaas-x-footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .secaas-x-searchbar {
        flex-direction: column;
    }

    .secaas-x-searchbar .secaas-x-btn {
        width: 100%;
    }

    .secaas-x-grid {
        grid-template-columns: 1fr 1fr;
    }

    .secaas-x-stats {
        grid-template-columns: 1fr 1fr;
    }

    .secaas-x-table-wrap {
        overflow: visible;
    }

    .secaas-x-table,
    .secaas-x-table tbody,
    .secaas-x-table tr,
    .secaas-x-table td {
        display: block;
        width: 100%;
    }

    .secaas-x-table thead {
        display: none;
    }

    .secaas-x-table tbody tr {
        padding: 10px 14px;
        border-bottom: 8px solid var(--x-bg);
    }

    .secaas-x-table tbody tr:last-child {
        border-bottom: 0;
    }

    .secaas-x-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px dashed var(--x-line);
        text-align: left;
        background: transparent !important;
    }

    .secaas-x-table tbody td:last-child {
        border-bottom: 0;
    }

    .secaas-x-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--x-muted);
        font-size: 12px;
        font-weight: 700;
        text-align: right;
    }

    .secaas-x-table tbody td > * {
        text-align: left;
    }

    .secaas-x-table tbody td.is-end {
        justify-content: flex-end;
    }

    .secaas-x-table tbody td.is-end::before {
        content: none;
    }

    .secaas-x-table .secaas-pin-detail-row,
    .secaas-x-table tr.secaas-x-detail {
        padding: 0;
    }

    .secaas-x-table .secaas-pin-detail-row > td,
    .secaas-x-table tr.secaas-x-detail > td {
        display: block;
        text-align: right;
        padding: 12px 14px;
    }

    .secaas-x-table .secaas-pin-detail-row > td::before,
    .secaas-x-table tr.secaas-x-detail > td::before {
        content: none;
    }

    .secaas-x-footer {
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .secaas-x-grid {
        gap: 10px;
    }

    .secaas-x-field input[type="date"] {
        font-size: 12.5px;
    }

    .secaas-x-tab:not(.is-active) .secaas-x-tab-count {
        display: none;
    }
}

/* ---------- کارت‌های خلاصه وضعیت (فیلتر سریع) ---------- */

a.secaas-x-stat,
a.secaas-x-stat:hover,
a.secaas-x-stat:focus {
    color: var(--x-ink);
    text-decoration: none;
}

a.secaas-x-stat:focus-visible {
    outline: 2px solid var(--x-blue);
    outline-offset: 2px;
}

.secaas-x-stat--success .secaas-x-dot { background: var(--x-green); }
.secaas-x-stat--warning .secaas-x-dot { background: var(--x-amber); }
.secaas-x-stat--danger  .secaas-x-dot { background: var(--x-red); }
.secaas-x-stat--info    .secaas-x-dot { background: var(--x-blue); }
.secaas-x-stat--muted   .secaas-x-dot { background: #9aa1b4; }

.secaas-x-stat.is-active .secaas-x-stat-value { color: var(--x-blue); }

.secaas-x-panel > .secaas-x-stats {
    margin: 0;
    padding: 16px 18px 0;
}

@media (max-width: 760px) {

    .secaas-x-panel > .secaas-x-stats {
        display: flex;
        gap: 8px;
        padding: 14px 14px 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .secaas-x-panel > .secaas-x-stats::-webkit-scrollbar {
        display: none;
    }

    .secaas-x-panel > .secaas-x-stats .secaas-x-stat {
        flex: 0 0 auto;
        min-width: 104px;
        padding: 9px 12px;
    }

    .secaas-x-panel > .secaas-x-stats .secaas-x-stat-value {
        font-size: 18px;
    }
}

@media (max-width: 480px) {

    .secaas-x-tab {
        gap: 6px;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .secaas-x-tab > svg {
        display: none;
    }
}