/* =====================================================
   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;
}