/* =====================================================
   NATIVE THEME OVERRIDE
   تم تیره سراسری برای المان‌های استاندارد بوت‌استرپ/WHMCS که هنوز
   به‌صورت اختصاصی بازسازی نشدن (مدیریت کاربر، مخاطبین، پاپ‌آپ‌ها،
   جدول‌های DataTables، مودال‌ها و...). این فایل باعث می‌شه هر صفحه‌ای
   که هنوز قالب سفارشی نداره، خودکار با تم تیره ما هماهنگ باشه.
===================================================== */

/* ---------- Cards / panels ---------- */
body.app-shell-body .card,
body.app-shell-body .mc-promo-login,
body.app-shell-body .mc-promo-manage {
    background-color: var(--app-panel-bg-alt) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: var(--app-text) !important;
    border-radius: var(--app-radius-lg) !important;
}

body.app-shell-body .card-header,
body.app-shell-body .card-footer {
    background-color: var(--app-panel-bg) !important;
    border-color: var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .card-title,
body.app-shell-body h1,
body.app-shell-body h2,
body.app-shell-body h3,
body.app-shell-body h4,
body.app-shell-body h5,
body.app-shell-body h6 {
    color: #fff !important;
}

body.app-shell-body p,
body.app-shell-body label,
body.app-shell-body .col-form-label {
    color: var(--app-text) !important;
}

body.app-shell-body small,
body.app-shell-body .text-muted {
    color: var(--app-text-muted) !important;
}

/* ---------- Forms ---------- */
body.app-shell-body .form-control,
body.app-shell-body .custom-select,
body.app-shell-body select.form-control,
body.app-shell-body textarea.form-control,
body.app-shell-body input[type="text"],
body.app-shell-body input[type="email"],
body.app-shell-body input[type="password"],
body.app-shell-body input[type="tel"],
body.app-shell-body input[type="number"],
body.app-shell-body input[type="search"] {
    background-color: var(--app-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: var(--app-text) !important;
    border-radius: var(--app-radius-md) !important;
}

body.app-shell-body .form-control::placeholder {
    color: var(--app-text-muted) !important;
}

body.app-shell-body .form-control:focus,
body.app-shell-body .custom-select:focus {
    border-color: var(--app-accent) !important;
    box-shadow: none !important;
}

body.app-shell-body .form-control:disabled,
body.app-shell-body .form-control[readonly] {
    background-color: var(--app-panel-bg) !important;
    opacity: 0.6 !important;
}

body.app-shell-body .input-group-text {
    background-color: var(--app-panel-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: var(--app-text-muted) !important;
}

body.app-shell-body .custom-file-label {
    background-color: var(--app-bg) !important;
    border-color: var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

/* ---------- حذف کامل ویجت پرچم/کد کشور تلفن (intl-tel-input) ----------
   این ویجت هم توی RTL درست جا نمی‌افتاد هم روی بخش‌های دیگه صفحه
   می‌افتاد - به درخواست شما کاملاً حذف شد و فیلد تلفن به یه اینپوت
   متنی ساده و عادی برمی‌گرده. */
body.app-shell-body .intl-tel-input .flag-container,
body.app-shell-body .iti .flag-container,
body.app-shell-body .selected-flag,
body.app-shell-body .country-list {
    display: none !important;
}

body.app-shell-body .intl-tel-input input,
body.app-shell-body .intl-tel-input.allow-dropdown input,
body.app-shell-body .iti input {
    padding-right: .9rem !important;
    padding-left: .9rem !important;
    background-color: var(--app-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: var(--app-text) !important;
    border-radius: var(--app-radius-md) !important;
    direction: rtl;
    text-align: right !important;
}

/* ---------- Buttons ---------- */
body.app-shell-body .btn-default {
    background-color: var(--app-panel-bg-alt) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: #e2e8f0 !important;
}

body.app-shell-body .btn-default:hover {
    background-color: var(--app-border-lifted) !important;
    color: #fff !important;
}

body.app-shell-body .btn-primary,
body.app-shell-body .btn.btn-success.open-modal {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
}

body.app-shell-body .btn-primary:hover,
body.app-shell-body .btn.btn-success.open-modal:hover {
    background-color: var(--app-accent-hover) !important;
    border-color: var(--app-accent-hover) !important;
}

body.app-shell-body .btn-danger,
body.app-shell-body .btn-danger.open-modal {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
    color: #fb7185 !important;
}

body.app-shell-body .btn-danger:hover {
    background-color: rgba(244, 63, 94, 0.3) !important;
    color: #fff !important;
}

/* ---------- Modals ---------- */
body.app-shell-body .modal-content {
    background-color: var(--app-panel-bg-alt) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .modal-header {
    background-color: var(--app-panel-bg) !important;
    border-color: var(--app-border-lifted) !important;
}

body.app-shell-body .modal-header .modal-title,
body.app-shell-body .modal-header .close {
    color: #fff !important;
}

body.app-shell-body .modal-footer {
    border-color: var(--app-border-lifted) !important;
}

/* ---------- Popovers / تولتیپ‌ها (اطلاعیه‌ها، پسورد ژنراتور) ---------- */
body.app-shell-body .popover,
body.app-shell-body .popover-user-notifications {
    background-color: var(--app-panel-bg-alt) !important;
    border: 1px solid var(--app-border-lifted) !important;
    color: var(--app-text) !important;
    box-shadow: 0 20px 45px rgba(0,0,0,.45) !important;
}

body.app-shell-body .popover-header {
    background-color: var(--app-panel-bg) !important;
    border-color: var(--app-border-lifted) !important;
    color: #fff !important;
}

body.app-shell-body .popover-body,
body.app-shell-body .popover-user-notifications .popover-body {
    color: var(--app-text) !important;
    background-color: transparent !important;
}

/* لیست خود اطلاعیه‌ها - این کلاس اختصاصی WHMCS رنگ متن رو با
   مقدار ثابت خاکستری تنظیم کرده بود که با تم تیره ما تداخل داشت */
body.app-shell-body .popover-user-notifications ul li {
    border-bottom-color: var(--app-border) !important;
}

body.app-shell-body .popover-user-notifications ul li a {
    color: var(--app-text) !important;
}

body.app-shell-body .popover-user-notifications ul li a:hover {
    background-color: var(--app-panel-bg) !important;
}

body.app-shell-body .popover-user-notifications ul li .message {
    color: var(--app-text) !important;
}

body.app-shell-body .popover-user-notifications ul li.none {
    color: var(--app-text-muted) !important;
}

body.app-shell-body .bs-popover-bottom .popover-header::before,
body.app-shell-body .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
    border-bottom-color: var(--app-panel-bg) !important;
}

/* فلش کوچیک popover هم باید هم‌رنگ پس‌زمینه تیره بشه */
body.app-shell-body .popover .arrow::after,
body.app-shell-body .bs-popover-auto[x-placement^="bottom"] > .arrow::after,
body.app-shell-body .bs-popover-bottom > .arrow::after {
    border-bottom-color: var(--app-panel-bg-alt) !important;
}
body.app-shell-body .popover .arrow::before,
body.app-shell-body .bs-popover-auto[x-placement^="bottom"] > .arrow::before,
body.app-shell-body .bs-popover-bottom > .arrow::before {
    border-bottom-color: var(--app-border-lifted) !important;
}

/* ---------- Tables / DataTables ---------- */
body.app-shell-body .table {
    color: var(--app-text) !important;
    background-color: transparent !important;
}

body.app-shell-body .table td,
body.app-shell-body .table th {
    border-color: var(--app-border-lifted) !important;
    background-color: var(--app-panel-bg-alt) !important;
}

body.app-shell-body .table thead th {
    background-color: var(--app-panel-bg) !important;
    color: var(--app-text-muted) !important;
}

/* ردیف‌های جمع/جمع‌کل (مثل صفحه پرداخت همگانی) */
body.app-shell-body .table tr.masspay-total td {
    background-color: var(--app-panel-bg) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

body.app-shell-body table.table-list thead th {
    background-color: var(--app-panel-bg) !important;
    color: var(--app-text-muted) !important;
    border-color: var(--app-border-lifted) !important;
}

body.app-shell-body .table-list > tbody > tr > td {
    background-color: var(--app-panel-bg-alt) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border-lifted) !important;
}

body.app-shell-body .table-list > tbody > tr:hover > td {
    background-color: var(--app-bg) !important;
}

body.app-shell-body .dataTables_wrapper .dataTables_filter label .form-control,
body.app-shell-body .dataTables_wrapper .dataTables_length select {
    background-color: var(--app-bg) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .dataTables_wrapper .dataTables_info,
body.app-shell-body .dataTables_wrapper .dataTables_length,
body.app-shell-body .dataTables_wrapper .dataTables_filter label {
    color: var(--app-text-muted) !important;
}

body.app-shell-body .page-item .page-link {
    background-color: var(--app-panel-bg-alt) !important;
    border-color: var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .page-item.active .page-link {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
}

body.app-shell-body .page-item.disabled .page-link {
    background-color: var(--app-panel-bg) !important;
    color: var(--app-text-muted) !important;
}

/* ---------- List groups ---------- */
body.app-shell-body .list-group-item {
    background-color: var(--app-panel-bg-alt) !important;
    border-color: var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .list-group-item.active {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
}

/* ---------- بدون خط زیر لینک/دکمه با هاور موس (سراسری) ---------- */
body.app-shell-body a[class^="app-"],
body.app-shell-body a[class*=" app-"],
body.app-shell-body a[class^="btn-app-"],
body.app-shell-body a[class*=" btn-app-"],
body.app-shell-body a.ob-announce-btn,
body.app-shell-body .app-sidebar a,
body.app-shell-body .app-topbar a {
    text-decoration: none !important;
}
body.app-shell-body a[class^="app-"]:hover,
body.app-shell-body a[class*=" app-"]:hover,
body.app-shell-body a[class^="btn-app-"]:hover,
body.app-shell-body a[class*=" btn-app-"]:hover,
body.app-shell-body a.ob-announce-btn:hover,
body.app-shell-body .app-sidebar a:hover,
body.app-shell-body .app-topbar a:hover {
    text-decoration: none !important;
}

body.app-shell-body a.list-group-item:hover {
    background-color: var(--app-bg) !important;
    color: #fff !important;
}

/* ---------- Checkboxها و رادیوها (فرم‌های Bootstrap در حالت RTL) ----------
   Bootstrap برای چیدمان LTR طراحی شده (چک‌باکس با position:absolute و
   margin-left منفی جلوی متن قرار می‌گیره) - توی RTL این باعث می‌شه
   چک‌باکس به متن بچسبه یا روش بیفته. با flex این رو درست می‌کنیم. */
body.app-shell-body .form-check {
    padding-right: 0 !important;
    padding-left: 0 !important;
    display: block;
}

body.app-shell-body .form-check label {
    display: flex !important;
    align-items: flex-start;
    gap: .6rem;
    cursor: pointer;
    color: var(--app-text) !important;
    font-size: .85rem;
    line-height: 1.6;
    margin-bottom: .8rem;
}

body.app-shell-body .form-check-input {
    position: static !important;
    margin: .15rem 0 0 0 !important;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--app-accent);
    background-color: var(--app-panel-bg-alt);
    border: 1px solid var(--app-border-lifted);
    cursor: pointer;
}

body.app-shell-body .form-check br {
    display: none;
}

/* ---------- Alerts ---------- */
body.app-shell-body .alert {
    border-radius: var(--app-radius-md) !important;
    border: 1px solid var(--app-border-lifted) !important;
}

body.app-shell-body .alert-info,
body.app-shell-body .alert-block {
    background-color: var(--app-panel-bg-alt) !important;
    border-color: var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .alert-success {
    background-color: rgba(52, 211, 153, .1) !important;
    border-color: rgba(52, 211, 153, .3) !important;
    color: #34d399 !important;
}

body.app-shell-body .alert-warning {
    background-color: rgba(251, 191, 36, .1) !important;
    border-color: rgba(251, 191, 36, .3) !important;
    color: #fbbf24 !important;
}

body.app-shell-body .alert-danger {
    background-color: rgba(251, 113, 133, .1) !important;
    border-color: rgba(251, 113, 133, .3) !important;
    color: #fb7185 !important;
}

body.app-shell-body .alert a {
    color: inherit !important;
    text-decoration: underline !important;
}

/* فرم داخل alert (مثلاً «انتخاب تماس» توی صفحه Contacts) */
body.app-shell-body .alert .form-control,
body.app-shell-body .alert .custom-select {
    background-color: var(--app-bg) !important;
    border-color: var(--app-border-lifted) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .alert .btn-default {
    background-color: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: #fff !important;
}

/* ---------- Misc ---------- */
body.app-shell-body hr {
    border-color: var(--app-border-lifted) !important;
}

body.app-shell-body .badge-dark {
    background-color: var(--app-panel-bg) !important;
    color: var(--app-text) !important;
}

body.app-shell-body .dropdown-menu {
    background-color: var(--app-panel-bg-alt) !important;
    border-color: var(--app-border-lifted) !important;
}

body.app-shell-body .dropdown-item {
    color: var(--app-text) !important;
}

body.app-shell-body .dropdown-item:hover,
body.app-shell-body .dropdown-item:focus {
    background-color: var(--app-bg) !important;
    color: #fff !important;
}

/* ======================================================================
 * پاپ‌اور اعلان‌ها - بازطراحی
 * ======================================================================
 * پوسته پاپ‌اور مال بوت‌استرپه و محتواش از includes/app-header.tpl میاد.
 * قوانین اینجا بعد از بلوک popover بالا لود می‌شن، پس برنده‌ن.
 * ====================================================================== */

body.app-shell-body .popover-user-notifications {
    /* ۲۷۶ پیکسل پیش‌فرض بوت‌استرپ برای پیام‌های بلند فارسی خیلی تنگ بود */
    max-width: 22rem;
    width: max-content;
    border-radius: var(--app-radius-lg) !important;
    padding: 0;
    overflow: hidden;
}

body.app-shell-body .popover-user-notifications .popover-header {
    font-size: .78rem;
    font-weight: 800;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--app-border) !important;
    border-radius: 0 !important;
}

/* فلش سربرگ رو حذف می‌کنیم؛ با گوشه‌های گرد جدید تمیزتره */
body.app-shell-body .popover-user-notifications .popover-header::before {
    display: none !important;
}

body.app-shell-body .popover-user-notifications .popover-body {
    padding: .35rem;
    max-height: 22rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-lifted) transparent;
}

body.app-shell-body .popover-user-notifications .popover-body::-webkit-scrollbar { width: 6px; }
body.app-shell-body .popover-user-notifications .popover-body::-webkit-scrollbar-thumb {
    background-color: var(--app-border-lifted);
    border-radius: 999px;
}

body.app-shell-body .popover-user-notifications ul.client-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.app-shell-body .popover-user-notifications ul li {
    border: none !important;
    margin: 0;
    padding: 0;
}

body.app-shell-body .popover-user-notifications ul li + li {
    margin-top: .2rem;
}

body.app-shell-body .popover-user-notifications ul li a {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .75rem;
    border-radius: var(--app-radius-md);
    text-decoration: none !important;
    transition: background-color .15s ease;
}

body.app-shell-body .popover-user-notifications ul li a:hover {
    background-color: rgba(148, 163, 184, .09) !important;
}

/* حباب آیکن، رنگش بر اساس شدت اعلان */
body.app-shell-body .popover-user-notifications .alert-icon {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: .55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: rgba(148, 163, 184, .14);
    color: #94a3b8;
}

body.app-shell-body .alert-sev-danger .alert-icon {
    background-color: rgba(244, 63, 94, .14);
    color: #fb7185;
}
body.app-shell-body .alert-sev-warning .alert-icon {
    background-color: rgba(245, 158, 11, .14);
    color: #fbbf24;
}
body.app-shell-body .alert-sev-info .alert-icon {
    background-color: rgba(37, 99, 235, .16);
    color: #60a5fa;
}
body.app-shell-body .alert-sev-success .alert-icon {
    background-color: rgba(16, 185, 129, .14);
    color: #34d399;
}

body.app-shell-body .popover-user-notifications ul li .message {
    flex: 1;
    min-width: 0;
    font-size: .74rem;
    line-height: 1.9;
    color: #cbd5e1 !important;
}

body.app-shell-body .popover-user-notifications ul li a:hover .message {
    color: #fff !important;
}

/* فلش «برو» - توی RTL باید برعکس بشه و فقط موقع hover پررنگ */
body.app-shell-body .popover-user-notifications .alert-go {
    flex-shrink: 0;
    margin-top: .3rem;
    color: #475569;
    transform: scaleX(-1);
    transition: color .15s ease, transform .15s ease;
}

body.app-shell-body .popover-user-notifications ul li a:hover .alert-go {
    color: var(--app-accent-hover);
    transform: scaleX(-1) translateX(2px);
}

/* حالت خالی */
body.app-shell-body .popover-user-notifications ul li.none {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1.6rem 1rem;
    color: #64748b !important;
    font-size: .76rem;
    text-align: center;
}

body.app-shell-body .popover-user-notifications ul li.none .app-icon { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
    body.app-shell-body .popover-user-notifications ul li a,
    body.app-shell-body .popover-user-notifications .alert-go { transition: none; }
    body.app-shell-body .popover-user-notifications ul li a:hover .alert-go { transform: scaleX(-1); }
}

/* ======================================================================
 * فیلد انتخاب فایل (custom-file بوت‌استرپ)
 * ======================================================================
 * مارک‌آپ این فیلد از خود WHMCS میاد و اسکریپت هسته با کلون کردن
 * .file-upload ردیف‌های جدید می‌سازه، پس دست بهش نمی‌زنیم و فقط
 * استایلش می‌کنیم.
 *
 * theme.min.css نسخه بوت‌استرپ رو با پس‌زمینه سفید (#fff)، حاشیه
 * #ced4da و یه دکمه خاکستری «Browse» توی ::after لود می‌کنه. قالب ما
 * فقط موقعیت این عناصر رو تنظیم کرده بود و هیچ‌وقت رنگ‌شون رو عوض
 * نکرده بود؛ نتیجه‌ش یه جعبه سفید وسط فرم تیره بود که دقیقاً شبیه
 * فیلد پیش‌فرض مرورگر دیده می‌شد.
 *
 * دکمه ::after توی بوت‌استرپ right:0 ـه که توی صفحه RTL روی متن نام
 * فایل می‌افته، برای همین به لبه چپ منتقل شده.
 */

body.app-shell-body .custom-file {
    height: 2.5rem;
}

body.app-shell-body .custom-file-label {
    display: flex;
    align-items: center;
    height: 2.5rem;
    /* جا برای دکمه‌ای که روی لبه چپ نشسته */
    padding: 0 0.85rem 0 7rem;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--app-text-muted);
    background-color: var(--app-bg);
    border: 1px solid var(--app-border-lifted);
    border-radius: 0.65rem;
    box-shadow: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.app-shell-body .custom-file-label::after {
    right: auto;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    min-width: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.9rem;
    content: "انتخاب فایل";
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    color: #cbd5e1;
    background-color: var(--app-panel-bg-alt);
    border: 0;
    border-right: 1px solid var(--app-border-lifted);
    border-radius: 0.65rem 0 0 0.65rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* اگه جایی data-browse ست شده بود، همون برنده باشه */
body.app-shell-body .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse);
}

body.app-shell-body .custom-file:hover .custom-file-label {
    border-color: #475569;
}

body.app-shell-body .custom-file:hover .custom-file-label::after {
    background-color: #1f2735;
    color: #fff;
}

body.app-shell-body .custom-file-input:focus ~ .custom-file-label {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
}

body.app-shell-body .custom-file-input:disabled ~ .custom-file-label,
body.app-shell-body .custom-file-input[disabled] ~ .custom-file-label {
    background-color: var(--app-panel-bg-alt);
    opacity: 0.6;
}

/* ردیف‌های اضافه‌شده با «افزودن بیشتر» فاصله بگیرن */
body.app-shell-body #fileUploadsContainer .attachment-group {
    margin-top: 0.4rem;
}

@media (max-width: 575px) {
    /* روی عرض موبایل، فیلد و دکمه «افزودن بیشتر» کنار هم جا نمی‌شن و
       اسم فایل کامل قطع می‌شه؛ زیر هم می‌چینیم */
    body.app-shell-body .attachment-group {
        flex-direction: column;
        align-items: stretch;
    }

    /* .custom-file روی flex:1 ـه؛ توی ستون این یعنی flex-basis:0 روی
       محور عمودی و ارتفاع فیلد صفر می‌شه. باید برگرده به ارتفاع خودش. */
    body.app-shell-body .attachment-group .custom-file {
        flex: none;
        width: 100%;
    }

    body.app-shell-body .attachment-group .input-group-append,
    body.app-shell-body .attachment-group .input-group-append button {
        width: 100%;
        justify-content: center;
    }

    body.app-shell-body .custom-file-label { padding-left: 5.5rem; }
    body.app-shell-body .custom-file-label::after { min-width: 5rem; padding: 0 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell-body .custom-file-label,
    body.app-shell-body .custom-file-label::after { transition: none; }
}