/* ===================================================================
   Advanced Responsive Tables - WHMCS 8.13.4
   سازگار با: clientareaproducts / clientareainvoices /
              clientareadomains / supportticketslist
   نکته: این فایل باید در قالب اصلی include یا در یک فایل css جدا
   لینک شود (مثلاً داخل header.tpl):
   <link rel="stylesheet" href="{$WEB_ROOT}/templates/{$template}/css/advanced-tables.css">
=================================================================== */

/* ---------- کارت‌های آماری بالای صفحه ---------- */
.at-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.at-stat-card {
    flex: 1 1 220px;
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(0,0,0,.04);
    transition: transform .15s ease, box-shadow .15s ease;
}

.at-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.09);
}

.at-stat-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.at-stat-icon.at-success { background: rgba(40,167,69,.12); color: #1c8a3c; }
.at-stat-icon.at-primary { background: rgba(13,110,253,.12); color: #0d6efd; }
.at-stat-icon.at-warning { background: rgba(255,159,28,.14); color: #d98c00; }
.at-stat-icon.at-danger  { background: rgba(220,53,69,.12);  color: #d8323f; }
.at-stat-icon.at-info    { background: rgba(13,202,240,.14); color: #0aa8c2; }

.at-stat-body p {
    margin: 0 0 2px;
    font-size: 13px;
    color: #8a8d99;
}

.at-stat-body h4 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #2a2e3d;
}

/* ---------- کانتینر جدول ---------- */
.at-table-container {
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.04);
    margin-bottom: 24px;
}

.at-table-container h5 {
    font-weight: 700;
    margin-bottom: 2px;
}

.at-table-container > p {
    color: #8a8d99;
    font-size: 13.5px;
    margin-bottom: 14px;
}

/* ---------- خود جدول (حالت دسکتاپ) ---------- */
table.at-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

table.at-table thead th {
    background: transparent;
    color: #8a8d99;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    border-bottom: 1px solid #eef0f4;
    padding: 10px 12px;
    white-space: nowrap;
}

table.at-table tbody tr {
    cursor: pointer;
    transition: background .12s ease;
}

table.at-table tbody tr:hover {
    background: #f7f8fb;
}

table.at-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid #f1f2f6;
    font-size: 13.5px;
    vertical-align: middle;
    color: #3a3d4d;
}

table.at-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- بج وضعیت (status badge) ---------- */
.at-table .label.status,
.at-status-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* رنگ‌های پیش‌فرض بر اساس کلاس‌های استاندارد WHMCS - در صورت نیاز
   با رنگ‌بندی قالب فعلی خودتان هماهنگ/بازنویسی کنید */
.status-active,   .status-paid,      .status-completed,   .status-open      { background:#e5f7ea; color:#1c8a3c; }
.status-pending,  .status-awaitingpayment, .status-answered            { background:#fff4e0; color:#d98c00; }
.status-suspended,.status-overdue,   .status-onhold,      .status-customeractive { background:#ffe9ea; color:#d8323f; }
.status-cancelled,.status-terminated,.status-refunded,    .status-closed    { background:#eceef2; color:#6b6f80; }
.status-fraud,    .status-collections                                       { background:#f3e6ff; color:#7a3bd1; }
.status-customer-reply                                                      { background:#e0f3ff; color:#0aa8c2; }

/* ---------- لینک دامنه / زیرعنوان داخل سلول ---------- */
.at-cell-title { font-weight: 600; color: #2a2e3d; display:block; }
.at-cell-sub   { font-size: 12px; color: #8a8d99; display:block; margin-top:2px; }
.at-cell-sub a { color: #8a8d99; text-decoration: none; }
.at-cell-sub a:hover { color: #0d6efd; }

/* ---------- ====== حالت موبایل (کارتی) ====== ---------- */
@media (max-width: 767px) {

    .at-stats-row { gap: 10px; margin-bottom: 18px; }
    .at-stat-card { flex: 1 1 calc(50% - 10px); padding: 14px; }
    .at-stat-body h4 { font-size: 18px; }
    .at-stat-body p { font-size: 11.5px; }
    .at-stat-icon { width: 38px; height: 38px; min-width:38px; font-size:16px; }

    .at-table-container { padding: 14px 12px 6px; border-radius: 12px; }

    /* جدول معمولی مخفی، نمایش کارتی فعال می‌شود */
    table.at-table thead { display: none; }
    table.at-table, table.at-table tbody, table.at-table tr, table.at-table td {
        display: block;
        width: 100%;
    }

    table.at-table tbody tr {
        background: #fff;
        border: 1px solid #eef0f4;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 12px 14px;
        box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }

    table.at-table tbody tr:hover { background:#fff; }

    table.at-table tbody td {
        border-bottom: none;
        padding: 6px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 13px;
    }

    /* برچسب ستون پیش از هر مقدار، از data-label خوانده می‌شود */
    table.at-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11.5px;
        color: #b0b3bf;
        font-weight: 600;
        flex-shrink: 0;
    }

    /* سلول اول (عنوان سرویس/فاکتور/تیکت/دامنه) به‌صورت تمام‌عرض و برجسته */
    table.at-table tbody td.at-card-header {
        display: block;
        padding-bottom: 10px;
        margin-bottom: 6px;
        border-bottom: 1px solid #f1f2f6;
    }
    table.at-table tbody td.at-card-header::before { content: none; }

    table.at-table tbody td.at-card-header .at-cell-title { font-size: 14.5px; }

    /* وضعیت داخل کارت موبایل، گوشه بالا-راست هدر */
    table.at-table tbody td.at-card-status {
        display: block;
        padding: 0;
        margin: -34px 0 10px;
        text-align: left;
    }
    table.at-table tbody td.at-card-status::before { content:none; }

    /* ستون آیکون SSL/چک‌باکس که در موبایل فضای کمی دارد */
    table.at-table tbody td.at-card-icon {
        position: absolute;
        opacity: .85;
    }

    table.at-table tbody tr { position: relative; }
}

@media (max-width: 420px) {
    .at-stat-card { flex: 1 1 100%; }
}