/* =====================================================================
   AdminTheme.css — پالت یکپارچه، خوانا و هماهنگ برای «پنل ادمین»
   ---------------------------------------------------------------------
   - فقط داخل پنل ادمین اثر می‌کند (همه‌ی قاعده‌ها زیر .admin-root هستند؛ سایت عمومی تغییری نمی‌کند).
   - باید آخرین فایل CSS در App.razor باشد (بعد از CrudPage.css / Modal.css / RichText.css).
   - ایده: پس‌زمینه و سایدبار «سرمه‌ای-فیروزه‌ای» (مثل تصویر پس‌زمینه) ← کارت‌ها و جدول‌ها «روشن و تقریباً مات» با متن سرمه‌ای تیره
     ← مودال‌ها «شیشه‌ی تیره» با متن روشن ← ادیتور متن: ناحیه‌ی نوشتن سفید با متن تیره (مثل کاغذ).
   - همه‌ی رنگ‌های متن حداقل کنتراست 4.5:1 دارند (WCAG AA). اگر خواستید رنگ اصلی را عوض کنید فقط بخش «توکن‌ها» را تغییر دهید.
   ===================================================================== */

/* ---------- ۱) توکن‌ها ---------- */
.admin-root {
    --adm-ink: #0b2540;            /* متن اصلی روی سطح روشن  (کنتراست ≈ 15:1 روی سفید) */
    --adm-ink-soft: #3f566e;       /* متن کم‌رنگ‌تر روی سطح روشن (≈ 7.5:1) */
    --adm-line: #bcd3e0;           /* خطوط و حاشیه‌ها روی سطح روشن */
    --adm-surface: #ffffff;
    --adm-surface-2: #eef6fa;      /* سطح دوم: سرستون، ردیف‌های زوج، فوتر */
    --adm-primary: #0e7490;        /* فیروزه‌ای تیره: دکمه‌ها، لینک‌ها (سفید روی آن ≈ 5.4:1) */
    --adm-primary-dark: #155e75;
    --adm-primary-2: #0369a1;      /* آبی: انتهای گرادیان */
    --adm-primary-soft: #e0f4f9;
    --adm-danger: #b91c1c;
    --adm-danger-soft: #fee2e2;
    --adm-success: #047857;
    --adm-success-soft: #d1fae5;
    --adm-warning: #92400e;
    --adm-warning-soft: #fef3c7;

    /* روی سطح تیره (مودال، سایدبار) */
    --adm-on-dark: #f1f9ff;
    --adm-on-dark-soft: #c3dcea;
    --adm-cyan: #22d3ee;

    /* Radzen (ادیتور متن، دیالوگ‌ها، لیست‌های بازشو) */
    --rz-primary: #0e7490;
    --rz-primary-light: #22a6c4;
    --rz-primary-lighter: #e0f4f9;
    --rz-primary-dark: #155e75;
    --rz-primary-darker: #0b4a5e;
    --rz-link-color: #0e7490;
    --rz-link-hover-color: #155e75;
}

/* متنِ پیش‌فرضِ بیرون از کارت‌ها (مستقیماً روی تصویر تیره): روشن. کارت‌ها/مودال‌ها رنگ خودشان را دوباره ست می‌کنند. */
.admin-root .content {
    color: var(--adm-on-dark);
}

.admin-root .content > h3,
.admin-root .content > h2,
.admin-root .content > p,
.admin-root .Page-Title {
    color: #f1f9ff;
    text-shadow: 0 2px 14px rgba(0, 10, 30, .65);
}

.admin-root .Page-Title {
    font-weight: 800;
}

.admin-root .content > a:not([class]) {
    color: #7dd3fc;
}

.admin-root .crud-container a:not([class]) {
    color: var(--adm-primary);
}

/* نوار بالا */
.admin-root .top-row {
    background-color: rgba(255, 255, 255, .92);
}

.admin-root .admin-panel-title {
    color: #0b2540;
}

.admin-root .admin-back-link {
    color: #155e75;
    background: rgba(14, 116, 144, .12);
    border-color: rgba(14, 116, 144, .35);
}

/* ---------- ۲) متغیرهای صفحه‌های CRUD (همه‌ی جدول‌ها و فرم‌ها از این متغیرها رنگ می‌گیرند) ---------- */
.admin-root .crud-container {
    --primary: var(--adm-primary);
    --primary-dark: var(--adm-primary-dark);
    --primary-light: var(--adm-primary-soft);
    --accent: var(--adm-primary-2);
    --accent-light: #7dd3fc;
    --danger: var(--adm-danger);
    --danger-light: var(--adm-danger-soft);
    --warning: #b45309;
    --text: var(--adm-ink);
    --text-muted: var(--adm-ink-soft);
    --border: var(--adm-line);
    --bg: var(--adm-surface);
    --bg-soft: var(--adm-surface-2);
    --shadow-md: 0 6px 20px rgba(2, 26, 64, .16);
    --shadow-lg: 0 20px 40px rgba(2, 26, 64, .28);
    --shadow-glow: 0 0 18px rgba(14, 116, 144, .35);
    --glass-ink: var(--adm-ink);
    --glass-ink-soft: var(--adm-ink-soft);
    color: var(--adm-ink);
}

/* ---------- ۳) سطح‌ها: کارت‌ها تقریباً مات تا متن همیشه خوانا بماند ---------- */
.admin-root .crud-card,
.admin-root .crud-card:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(238, 247, 251, .96) 100%);
    border: 1px solid rgba(255, 255, 255, .85);
}

.admin-root .crud-card:hover {
    border-color: rgba(34, 211, 238, .75);
}

.admin-root .crud-search-box input,
.admin-root .crud-page-size,
.admin-root button.crud-page-size {
    background: rgba(255, 255, 255, .96);
    border: 1.5px solid #9fc3d6;
    color: var(--adm-ink);
}

.admin-root .crud-search-box input:hover,
.admin-root .crud-page-size:hover {
    background: #fff;
    border-color: var(--adm-primary);
}

.admin-root .crud-search-box input:focus,
.admin-root .crud-page-size:focus-within,
.admin-root button.crud-page-size.is-open,
.admin-root button.crud-page-size:focus-visible {
    background: #fff;
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 4px rgba(14, 116, 144, .25), 0 8px 24px rgba(2, 26, 64, .25);
}

.admin-root .crud-search-box input::placeholder {
    color: #587187;
    opacity: 1;
}

.admin-root .crud-search-box svg,
.admin-root .crud-page-size {
    color: var(--adm-ink-soft);
}

.admin-root .crud-search-box:focus-within svg {
    color: var(--adm-primary);
}

.admin-root .crud-page-size select,
.admin-root .crud-page-size-value {
    color: var(--adm-primary-dark);
}

.admin-root .crud-page-size select option {
    color: var(--adm-ink);
    background: #fff;
}

/* لیست «تعداد نمایش» */
.admin-root .crud-page-size-list {
    background: #fff;
    border: 1px solid var(--adm-line);
    box-shadow: 0 16px 36px rgba(2, 26, 64, .35);
}

.admin-root .crud-page-size-option {
    color: var(--adm-ink);
}

.admin-root .crud-page-size-option:hover,
.admin-root .crud-page-size-option:focus-visible {
    background: var(--adm-primary-soft);
    color: var(--adm-primary-dark);
}

.admin-root .crud-page-size-option.is-selected {
    color: #fff;
    background: linear-gradient(135deg, var(--adm-primary), var(--adm-primary-2));
}

/* ---------- ۴) جدول ---------- */
.admin-root .crud-table,
.admin-root .crud-table tbody td {
    color: var(--adm-ink);
}

.admin-root .crud-table thead th {
    background: #dcecf4;
    color: var(--adm-ink);
    border-bottom: 2px solid #9fc3d6;
    box-shadow: none;
}

.admin-root .sortable-header:hover {
    background-color: #cfe5f0;
    color: var(--adm-primary-dark);
}

.admin-root .crud-table tbody td {
    border-bottom: 1px solid #d3e3ec;
}

.admin-root .crud-table tbody tr {
    background: rgba(255, 255, 255, .55);
}

.admin-root .crud-table tbody tr:nth-child(even) {
    background: rgba(14, 116, 144, .06);
}

.admin-root .crud-table tbody tr:hover {
    background: #d9eef6;
    box-shadow: 0 4px 14px rgba(2, 26, 64, .14);
}

.admin-root .crud-table tbody tr::after {
    background: linear-gradient(180deg, var(--adm-cyan), var(--adm-primary-2));
}

.admin-root .cell-sub {
    color: var(--adm-ink-soft);
}

.admin-root .crud-empty {
    color: var(--adm-ink-soft);
}

/* نشان‌ها (badge) */
.admin-root .crud-table .up-badge {
    color: var(--adm-ink);
    background: #e3f1f7;
    border: 1px solid #b4d0df;
    box-shadow: none;
}

.admin-root .crud-table .up-badge-success {
    color: #065f46;
    background: var(--adm-success-soft);
    border-color: #6ee7b7;
}

.admin-root .crud-table .up-badge-warn {
    color: #7c2d12;
    background: var(--adm-warning-soft);
    border-color: #fcd34d;
}

/* فوتر و صفحه‌بندی */
.admin-root .crud-footer {
    background: #e6f1f7;
    border-top: 1px solid var(--adm-line);
}

.admin-root .crud-info-label,
.admin-root .page-ellipsis {
    color: var(--adm-ink-soft);
}

.admin-root .crud-info-label strong {
    color: var(--adm-ink);
}

.admin-root .page-btn {
    color: var(--adm-ink);
    background: #fff;
    border: 1px solid #a9c8d9;
    box-shadow: 0 2px 6px rgba(2, 26, 64, .12);
}

.admin-root .page-btn:hover:not(:disabled):not(.active) {
    color: var(--adm-primary-dark);
    background: var(--adm-primary-soft);
    border-color: var(--adm-primary);
    box-shadow: 0 4px 12px rgba(14, 116, 144, .25);
}

.admin-root .page-btn.active {
    color: #fff;
    text-shadow: none;
    background: linear-gradient(135deg, var(--adm-primary), var(--adm-primary-2));
    border-color: var(--adm-primary-dark);
    box-shadow: 0 6px 16px rgba(14, 116, 144, .45);
}

.admin-root .page-btn:disabled {
    opacity: .5;
    color: var(--adm-ink-soft);
    background: #eaf2f7;
    box-shadow: none;
}

/* دکمه‌های عملیات (ویرایش / حذف / وضعیت) */
.admin-root .btn-icon {
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(2, 26, 64, .14);
}

.admin-root .btn-icon.edit {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.admin-root .btn-icon.delete {
    color: #b91c1c;
    background: #fee2e2;
    border-color: #fca5a5;
}

.admin-root .btn-icon.status.on {
    color: #047857;
    background: #d1fae5;
    border-color: #6ee7b7;
}

.admin-root .btn-icon.status.off {
    color: #334155;
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.admin-root .btn-icon:hover:not(:disabled) {
    filter: brightness(.96);
    box-shadow: 0 6px 14px rgba(2, 26, 64, .22);
}

/* ---------- ۵) دکمه‌ها و فیلدها روی سطح روشن ---------- */
.admin-root .btn-secondary {
    background: #fff;
    color: var(--adm-ink);
    border: 1px solid #a9c8d9;
}

.admin-root .btn-secondary:hover:not(:disabled) {
    background: var(--adm-primary-soft);
    color: var(--adm-primary-dark);
}

.admin-root .btn-primary {
    background: linear-gradient(135deg, var(--adm-primary), var(--adm-primary-2));
    color: #fff;
    border-color: transparent;
}

.admin-root .btn-danger {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    color: #fff;
}

.admin-root .crud-card .form-control {
    background: #fff;
    color: var(--adm-ink);
    border: 1.5px solid #a9c8d9;
}

.admin-root .crud-card .form-control::placeholder {
    color: #587187;
    opacity: 1;
}

.admin-root .crud-card .form-control:focus,
.admin-root .form-control:focus {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 4px rgba(14, 116, 144, .22);
    outline: none;
}

.admin-root .status-note {
    color: var(--adm-ink);
    background: var(--adm-primary-soft);
    border: 1px dashed #5fb4cc;
}

.admin-root .field-error,
.admin-root .form-error-message {
    color: #b91c1c;
}

.admin-root .form-error-message {
    background: var(--adm-danger-soft);
}

/* توست‌ها */
.admin-root .crud-toast {
    background: linear-gradient(135deg, #047857, #059669);
    box-shadow: 0 10px 28px rgba(4, 120, 87, .4);
}

.admin-root .crud-toast.error {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    box-shadow: 0 10px 28px rgba(185, 28, 28, .4);
}

.admin-root .settings-tabs {
    background: #e6f1f7;
    border-bottom-color: var(--adm-line);
}

/* ---------- ۶) کارت‌های آمار (بازدیدها، تخفیف‌ها) ---------- */
.admin-root .dsc-stat,
.admin-root .vst-stat {
    --c1: var(--adm-primary);
    --c2: var(--adm-primary-2);
    background: rgba(255, 255, 255, .97);
    color: var(--adm-ink);
}

.admin-root .vst-stat.is-visits { --c1: #0e7490; }
.admin-root .vst-stat.is-unique { --c1: #0369a1; }
.admin-root .vst-stat.is-ips    { --c1: #047857; }
.admin-root .vst-stat.is-members { --c1: #b45309; }
.admin-root .vst-stat.is-bots   { --c1: #475569; }

.admin-root .vst-stat strong,
.admin-root .dsc-stat strong {
    color: var(--c1);
}

.admin-root .vst-stat small,
.admin-root .dsc-stat small {
    color: var(--adm-ink-soft);
}

.admin-root .vst-panel {
    background: rgba(255, 255, 255, .97);
    color: var(--adm-ink);
}

.admin-root .vst-chips {
    background: rgba(255, 255, 255, .95);
}

.admin-root .vst-chip {
    color: var(--adm-ink);
}

.admin-root .vst-chip:hover {
    background: var(--adm-primary-soft);
}

.admin-root .vst-chip.is-on {
    color: #fff;
    background: linear-gradient(135deg, var(--adm-primary), var(--adm-primary-2));
}

.admin-root .vst-select {
    background: #fff;
    color: var(--adm-ink);
}

/* ---------- ۷) مودال‌ها (شیشه‌ی تیره): متن روشن، فیلدهای خوانا ---------- */
.admin-root .modal-box {
    --primary: #22d3ee;
    --primary-dark: #a5f3fc;
    --primary-light: rgba(34, 211, 238, .16);
    --accent: #38bdf8;
    --accent-light: #7dd3fc;
    --border: rgba(255, 255, 255, .28);
    --text: #f1f9ff;
    --text-muted: #c3dcea;
    --bg-soft: rgba(2, 18, 45, .45);
    --danger: #fecaca;
    --danger-light: rgba(239, 68, 68, .22);
    background: radial-gradient(120% 30% at 50% 0%, rgba(255, 255, 255, .12), transparent 65%), linear-gradient(180deg, rgba(2, 22, 56, .95) 0%, rgba(4, 52, 92, .92) 55%, rgba(6, 78, 112, .90) 100%);
    color: var(--adm-on-dark);
}
.admin-root .modal-body .form-group label,
.admin-root .modal-box label {
    color: var(--adm-on-dark-soft);
}
.admin-root .modal-body .form-group:focus-within label {
    color: #a5f3fc;
}

/* این‌جا قبلاً color: dimgray بود → خاکستری روی سرمه‌ای، تقریباً ناخوانا */
.admin-root .modal-body .form-control,
.admin-root .modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.admin-root .modal-box textarea,
.admin-root .modal-box select {
    background: rgba(2, 16, 40, .55);
    color: #f1f9ff;
    border: 1.5px solid rgba(255, 255, 255, .32);
    caret-color: #67e8f9;
}
.admin-root .modal-body .form-control::placeholder,
.admin-root .modal-box input::placeholder,
.admin-root .modal-box textarea::placeholder {
    color: rgba(214, 235, 245, .65);
    opacity: 1;
}
.admin-root .modal-body .form-control:hover {
    background: rgba(2, 16, 40, .68);
    border-color: rgba(103, 232, 249, .7);
}
.admin-root .modal-body .form-control:focus {
    background: rgba(2, 16, 40, .78);
    border-color: #22d3ee;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .28);
}
.admin-root .modal-body .form-control[readonly],
.admin-root .modal-body .form-control:disabled {
    background: rgba(255, 255, 255, .08);
    color: #d8eaf4;
}
.admin-root .modal-body .form-control.invalid {
    background: rgba(239, 68, 68, .2);
    border-color: #fca5a5;
}
.admin-root .modal-box select option,
.admin-root .modal-body .form-control option {
    background: #05294f;
    color: #f1f9ff;
}
.admin-root .modal-body .btn-primary {
    background: linear-gradient(135deg, #0e7490 0%, #0369a1 100%);
    color: #fff;
}
.admin-root .modal-body .btn-secondary {
    background: rgba(255, 255, 255, .14);
    color: #f1f9ff;
    border-color: rgba(255, 255, 255, .35);
}
.admin-root .modal-box .field-error,
.admin-root .modal-box .form-error-message,
.admin-root .modal-box .delete-message strong {
    color: #fecaca;
}
.admin-root .modal-box .form-error-message {
    background: rgba(239, 68, 68, .22);
}
.admin-root .modal-box .form-section-title,
.admin-root .modal-box legend {
    color: #a5f3fc;
}

/* انتخاب‌گرهای تاریخ و محصول: پنل‌شان همیشه تیره است، پس متغیرهای تیره را خودشان داشته باشند (حتی بیرون از مودال، مثلاً گزارش‌ها) */
.admin-root .pdr-panel,
.admin-root .ppk-panel {
    --text: #f1f9ff;
    --text-muted: #c3dcea;
    --primary: #22d3ee;
    --border: rgba(255, 255, 255, .28);
    color: #f1f9ff;
}

/* ---------- ۸) ویرایشگر متن (RadzenHtmlEditor) ---------- */
/* قاب ادیتور: نوار ابزار روشن، ناحیه‌ی نوشتن سفید با متن تیره؛ هم داخل مودال تیره خوانا است هم بیرون از آن */
.admin-root .rte-wrap {
    color: var(--adm-ink);
}

.admin-root .rte-radzen {
    /* متغیرهای Radzen: همه‌ی دکمه‌ها، لیست‌های بازشو و ورودی‌های داخل ادیتور از این‌ها رنگ می‌گیرند */
    --rz-base-background-color: #ffffff;
    --rz-text-color: #0b2540;
    --rz-text-title-color: #0b2540;
    --rz-text-secondary-color: #3f566e;
    --rz-text-disabled-color: #7b8ea0;
    --rz-input-background-color: #ffffff;
    --rz-input-color: #0b2540;
    --rz-input-value-color: #0b2540;
    --rz-input-placeholder-color: #587187;
    --rz-input-border: 1px solid #a9c8d9;
    --rz-input-border-color: #a9c8d9;
    --rz-dropdown-item-color: #0b2540;
    --rz-dropdown-item-hover-background-color: #d9eef6;
    --rz-dropdown-item-hover-color: #0b2540;
    --rz-dropdown-background: #ffffff;
    --rz-panel-background-color: #ffffff;
    --rz-border-color: #bcd3e0;
    color-scheme: light;
    color: #0b2540;
    background: #ffffff;
    border: 1.5px solid #9fc3d6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(2, 26, 64, .18);
}

.admin-root .rte-wrap:focus-within .rte-radzen {
    border-color: #22d3ee;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .28);
}

.admin-root .rte-wrap[data-invalid="1"] .rte-radzen {
    border-color: #ef4444;
}

/* نوار ابزار (اولین بخش داخل ادیتور) */
.admin-root .rte-radzen > :first-child,
.admin-root .rte-radzen [class*="html-editor-toolbar"] {
    background: #e4f1f7;
    border-bottom: 1px solid #b4d0df;
    color: #0b2540;
}

/* دکمه‌های نوار ابزار: آیکون و متن همیشه تیره؛ حالت hover/فعال با فیروزه‌ای */
.admin-root .rte-radzen .rz-button,
.admin-root .rte-radzen .rz-button .rzi,
.admin-root .rte-radzen .rz-button .rz-button-text,
.admin-root .rte-radzen .rz-dropdown,
.admin-root .rte-radzen .rz-dropdown .rz-dropdown-label,
.admin-root .rte-radzen .rz-dropdown .rz-dropdown-trigger .rzi,
.admin-root .rte-radzen .rz-colorpicker .rzi {
    color: #0b2540 !important;
}

.admin-root .rte-radzen .rz-button {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.admin-root .rte-radzen .rz-button:hover:not(.rz-state-disabled),
.admin-root .rte-radzen .rz-button.rz-state-focused,
.admin-root .rte-radzen .rz-button:focus-visible {
    background: #c9e4f0 !important;
}

.admin-root .rte-radzen .rz-button.rz-state-active,
.admin-root .rte-radzen .rz-button[aria-pressed="true"],
.admin-root .rte-radzen .rz-button.rz-primary {
    background: var(--adm-primary) !important;
}

.admin-root .rte-radzen .rz-button.rz-state-active,
.admin-root .rte-radzen .rz-button.rz-state-active .rzi,
.admin-root .rte-radzen .rz-button[aria-pressed="true"],
.admin-root .rte-radzen .rz-button[aria-pressed="true"] .rzi {
    color: #fff !important;
}

.admin-root .rte-radzen .rz-button.rz-state-disabled,
.admin-root .rte-radzen .rz-button:disabled {
    opacity: .45;
}

.admin-root .rte-radzen .rz-dropdown {
    background: #fff;
    border: 1px solid #a9c8d9;
    border-radius: 8px;
}

.admin-root .rte-radzen .rz-dropdown:hover {
    border-color: var(--adm-primary);
}

.admin-root .rte-radzen [class*="separator"] {
    border-color: #a9c8d9;
    background-color: #a9c8d9;
}

/* ناحیه‌ی نوشتن: سفید با متن تیره و خط‌فاصله‌ی راحت */
.admin-root .rte-radzen .rz-html-editor-content {
    background: #ffffff;
    color: #0f172a;
    caret-color: var(--adm-primary);
    padding: 14px 18px;
    font-size: 15px;
    line-height: 2;
}

.admin-root .rte-radzen .rz-html-editor-content ::selection,
.admin-root .rte-radzen .rz-html-editor-content::selection {
    background: #bfe9f5;
    color: #0b2540;
}

.admin-root .rte-radzen .rz-html-editor-content a {
    color: #0e7490;
}

.admin-root .rte-radzen .rz-html-editor-content blockquote {
    margin: 1em 0;
    padding: 8px 16px;
    color: #0b2540;
    background: #ecfeff;
    border-inline-start: 4px solid var(--adm-primary);
    border-radius: 6px;
}

.admin-root .rte-radzen .rz-html-editor-content table,
.admin-root .rte-radzen .rz-html-editor-content th,
.admin-root .rte-radzen .rz-html-editor-content td {
    border-color: #9fc3d6;
}

/* ورودی‌های داخل ادیتور (جستجوی لیست‌ها و ...) از قاعده‌ی عمومیِ فیلدهای تیره‌ی مودال مستثنا هستند */
.admin-root .rte-wrap .rte-radzen input:not([type="checkbox"]):not([type="radio"]) {
    background: #ffffff;
    color: #0b2540;
    border-color: #a9c8d9;
}

/* حالت «کد HTML»: متن روشن روی زمینه‌ی تیره، چپ‌به‌راست */
.admin-root .rte-wrap .rte-radzen textarea,
.admin-root .rte-wrap .rte-radzen .rte-source {
    background: #0b1b30;
    color: #e6f4fb;
    caret-color: #67e8f9;
    direction: ltr;
    text-align: left;
    border: 0;
}

/* پنل «CSS اختصاصی» زیر ادیتور */
.admin-root .rte-cssbox {
    background: #e9f3f8;
    border: 1.5px solid #9fc3d6;
    color: var(--adm-ink);
}

.admin-root .rte-cssbox summary {
    color: var(--adm-ink);
    font-weight: 700;
    cursor: pointer;
}

.admin-root .rte-csshint {
    color: #3f566e;
}

.admin-root .rte-cssbox .rte-csstext {
    background: #0b1b30;
    color: #e6f4fb;
    border: 1.5px solid #5f87a0;
    caret-color: #67e8f9;
}

.admin-root .rte-cssbox .rte-csstext:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .28);
}

.admin-root .rte-cssbox .rte-csstext::placeholder {
    color: #8fb0c4;
    opacity: 1;
}

/* شمارنده: رنگ از متغیر محیط می‌آید (روی کارت روشن تیره، داخل مودال تیره روشن) */
.admin-root .rte-counter {
    color: var(--text-muted);
}

.admin-root .rte-counter.is-over {
    color: var(--danger);
    font-weight: 700;
}

/* پیش‌نمایش توضیحات غنی (مودال «مشاهده»): زمینه‌ی سفید ⇒ متن باید تیره باشد (قبلاً متن روشن مودال می‌گرفت و دیده نمی‌شد) */
.admin-root .rich-content-preview {
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid #9fc3d6;
}

.admin-root .rich-content-preview h1,
.admin-root .rich-content-preview h2,
.admin-root .rich-content-preview h3,
.admin-root .rich-content-preview h4,
.admin-root .rich-content-preview h5,
.admin-root .rich-content-preview h6 {
    color: #0b2540;
}

.admin-root .rich-content-preview a {
    color: #0e7490;
}

.admin-root .rich-content-preview blockquote {
    color: #0b2540;
    background: #ecfeff;
    border-inline-start-color: var(--adm-primary);
}

/* ---------- ۹) دیالوگ‌ها و لیست‌های بازشوی Radzen (لینک، تصویر، جدول، رنگ) ---------- */
.admin-root .rz-dialog {
    background: #ffffff;
    color: #0b2540;
    border: 1px solid #9fc3d6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 10, 30, .5);
}

.admin-root .rz-dialog .rz-dialog-titlebar {
    background: linear-gradient(135deg, #053d67 0%, #0e7490 100%);
    color: #ffffff;
    border: 0;
}

.admin-root .rz-dialog .rz-dialog-title,
.admin-root .rz-dialog .rz-dialog-titlebar-close,
.admin-root .rz-dialog .rz-dialog-titlebar-close .rzi {
    color: #ffffff;
}

.admin-root .rz-dialog .rz-dialog-content,
.admin-root .rz-dialog label,
.admin-root .rz-dialog .rz-label {
    color: #0b2540;
}

.admin-root .rz-dialog input,
.admin-root .rz-dialog textarea,
.admin-root .rz-dialog .rz-textbox,
.admin-root .rz-dialog .rz-dropdown,
.admin-root .rz-dialog .rz-numeric {
    background: #ffffff;
    color: #0b2540;
    border: 1.5px solid #a9c8d9;
    border-radius: 8px;
}

.admin-root .rz-dialog input:focus,
.admin-root .rz-dialog textarea:focus,
.admin-root .rz-dialog .rz-textbox:focus {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px rgba(14, 116, 144, .22);
    outline: none;
}

.admin-root .rz-dialog .rz-button.rz-primary,
.admin-root .rz-dialog .rz-button.rz-variant-filled.rz-primary {
    background: linear-gradient(135deg, var(--adm-primary), var(--adm-primary-2));
    color: #fff;
}

.admin-root .rz-dialog .rz-button.rz-light,
.admin-root .rz-dialog .rz-button.rz-base {
    color: #0b2540;
}

/* لیست‌های بازشو (قلم، اندازه، قالب‌بندی) و انتخاب رنگ */
.admin-root .rz-dropdown-panel,
.admin-root .rz-popup,
.admin-root .rz-colorpicker-popup {
    background: #ffffff;
    color: #0b2540;
    border: 1px solid #a9c8d9;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(2, 26, 64, .35);
    color-scheme: light;
}

.admin-root .rz-dropdown-panel .rz-dropdown-item,
.admin-root .rz-dropdown-panel li {
    color: #0b2540;
}

.admin-root .rz-dropdown-panel .rz-dropdown-item:hover,
.admin-root .rz-dropdown-panel li:hover {
    background: #d9eef6;
}

.admin-root .rz-dropdown-panel .rz-state-highlight,
.admin-root .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    background: var(--adm-primary);
    color: #fff;
}

/* ---------- ۱۰) صفحه‌های بدون کارت (خانه‌ی ادمین، تیکت‌ها) ---------- */
.admin-root .admin-home-empty,
.admin-root .admin-home-empty h3 {
    color: #f1f9ff;
    text-shadow: 0 2px 14px rgba(0, 10, 30, .6);
}

.admin-root .admin-home-empty p {
    color: #c3dcea;
}

/* ---------- ۱۱) حلقه‌ی فوکوس یکدست و واضح برای کیبورد ---------- */
.admin-root :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #22d3ee;
    outline-offset: 2px;
}

.admin-root .crud-card :where(button, a, input, select, textarea):focus-visible {
    outline-color: var(--adm-primary);
}

/* کاربرانی که کنتراست بالا می‌خواهند */
@media (prefers-contrast: more) {
    .admin-root {
        --adm-ink-soft: #1f3347;
        --adm-line: #7fa8bf;
    }
}


/* =====================================================================
   ۱۲) موبایل (مثلاً Galaxy S22 با عرض CSS = 360px) — فقط پنل ادمین
   ---------------------------------------------------------------------
   - هیچ چیزی نباید صفحه را افقی بزرگ‌تر کند (جدول‌ها، نوار ابزار، مودال‌ها)
   - جدول‌های لیست اصلی به «کارت» تبدیل می‌شوند (برچسب ستون‌ها را admin-responsive.js می‌گذارد)
   - اهداف لمسی حداقل ۴۰ تا ۴۴ پیکسل؛ فیلدها ۱۶px تا مرورگر موبایل هنگام فوکوس زوم نکند
   ===================================================================== */

/* جهت کشوی منو: در RTL از راست باز می‌شود (+1) و در LTR از چپ (-1)؛ قبلاً این متغیر هیچ‌جا تعریف نشده بود و در زبان‌های چپ‌به‌راست منوی «بسته» نیمه‌دیدنی می‌ماند */
.admin-root[dir="rtl"] { --dir-sign: 1; }
.admin-root[dir="ltr"] { --dir-sign: -1; }

/* وقتی منوی موبایل باز است، صفحه‌ی پشتش اسکرول نشود */
@media (max-width: 640.98px) {
    body:has(.admin-root .nav-scrollable.is-open) {
        overflow: hidden;
    }
}

@media (max-width: 640.98px) {

    /* حاشیه‌ی پیش‌فرض مرورگر (8px) و محاسبه‌ی عرض نباید به تم/کتابخانه‌ی دیگری وابسته باشد */
    body:has(.admin-root) {
        margin: 0;
    }

    .admin-root,
    .admin-root *,
    .admin-root *::before,
    .admin-root *::after {
        box-sizing: border-box;
    }

    .admin-root {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* هیچ عنصری از عرض صفحه بیرون نزند؛ کلمه‌ی خیلی بلند (ایمیل، آدرس) بشکند */
    .admin-root .content {
        overflow-wrap: anywhere;
    }

    .admin-root .content img,
    .admin-root .content video,
    .admin-root .content canvas,
    .admin-root .content iframe {
        max-width: 100%;
    }

    .admin-root .content pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* عنوان صفحه: ۲.۵rem در عرض ۳۶۰ خیلی بزرگ است */
    .admin-root .Page-Title,
    .admin-root .content > h3,
    .admin-root .content > h2 {
        font-size: clamp(1.3rem, 6.2vw, 1.75rem);
        line-height: 1.5;
    }

    .admin-root .Page-Title.page-title-center {
        margin-top: .1rem;
        margin-bottom: 16px;
    }

    /* ---------- نوار ابزار (افزودن / تعداد نمایش / جستجو) ---------- */
    .admin-root .crud-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "search search"
            "add    size";
        gap: 10px;
        margin-bottom: 14px;
    }

    .admin-root .crud-search-box {
        justify-self: stretch;
        max-width: none;
    }

    .admin-root .crud-search-box input {
        font-size: 16px;
        padding-block: 13px 11px;
        min-height: 48px;
    }

    .admin-root .btn-add {
        justify-self: stretch;
        justify-content: center;
        min-height: 48px;
        padding: 10px 16px;
        font-size: 16px;
        white-space: nowrap;
    }

    .admin-root .crud-page-size {
        justify-self: end;
        min-height: 48px;
        padding: 6px 14px;
        font-size: 15px;
    }

    .admin-root .crud-page-size select {
        font-size: 16px;
    }

    /* ---------- کارت اصلی ---------- */
    .admin-root .crud-card {
        border-radius: 16px;
    }

    .admin-root .crud-card:hover {
        transform: none;
    }

    /* ---------- جدول‌های لیست اصلی ← کارت ---------- */
    .admin-root .crud-card > .crud-table-wrapper {
        overflow: visible;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table {
        display: block;
        width: 100%;
        border-collapse: separate;
    }

    /* سرستون‌ها: فقط ستون‌های «قابل مرتب‌سازی» به‌صورت یک ردیف دکمه‌ی کشویی بالای کارت‌ها می‌مانند */
    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead {
        display: block;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead > tr {
        display: flex;
        gap: 8px;
        padding: 10px 12px 4px;
        overflow-x: auto;
        scrollbar-width: none;
        background: transparent;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead > tr::-webkit-scrollbar {
        display: none;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead > tr > th {
        display: none;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead > tr > th.sortable-header {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        min-height: 40px;
        padding: 6px 14px;
        border: 1px solid #a9c8d9;
        border-radius: 999px;
        background: #fff;
        font-size: 13px;
        box-shadow: 0 2px 6px rgba(2, 26, 64, .10);
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead > tr > th.col-hide-sm,
    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead > tr > th.col-hide-md {
        display: none !important;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody {
        display: block;
        padding: 6px 10px 10px;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr {
        display: block;
        margin: 10px 0 0;
        padding: 4px 14px 6px;
        border: 1px solid #c9deea;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(2, 26, 64, .12);
        overflow: hidden;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr:nth-child(even) {
        background: #f3f9fc;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr:hover {
        transform: none;
        box-shadow: 0 4px 14px rgba(2, 26, 64, .12);
    }

    /* هر سلول: «برچسب ستون ... مقدار» در یک ردیف */
    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 8px 0;
        border-bottom: 1px dashed #c9deea;
        text-align: end;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 40%;
        font-size: 12px;
        font-weight: 700;
        color: var(--adm-ink-soft);
        text-align: start;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td:not([data-label])::before {
        display: none;
    }

    /* سلول‌های ایمیل/تلفن (dir=ltr) ترتیب برچسب و مقدار را برعکس نکنند */
    .admin-root[dir="rtl"] .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td[dir="ltr"] {
        flex-direction: row-reverse;
    }

    .admin-root[dir="ltr"] .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td[dir="rtl"] {
        flex-direction: row-reverse;
    }

    /* ستون‌های کم‌اهمیتی که طراح صفحه برای موبایل مخفی کرده بود، همچنان مخفی بمانند */
    .admin-root .crud-card > .crud-table-wrapper > .crud-table .col-hide-sm,
    .admin-root .crud-card > .crud-table-wrapper > .crud-table .col-hide-md {
        display: none !important;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table .cell-title {
        max-width: 100%;
        white-space: normal;
    }

    /* ردیف عملیات: پایین کارت، دکمه‌ها بزرگ و کنار هم */
    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td.actions-cell {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 2px;
        padding: 12px 0 8px;
        border-bottom: 0;
        border-top: 1px solid #c9deea;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td.actions-cell::before {
        display: none;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td:last-child:not(.actions-cell) {
        border-bottom: 0;
    }

    .admin-root .btn-icon {
        width: 42px;
        height: 42px;
        margin-inline-start: 0;
    }

    .admin-root .btn-icon svg {
        width: 18px;
        height: 18px;
    }

    /* راهنمای شناور (tooltip) در لمس بی‌معنی است و می‌تواند از صفحه بیرون بزند */
    .admin-root .btn-icon::after {
        display: none;
    }

    /* جدول‌های کوچک داخل مودال/پیش‌نمایش همچنان با اسکرول افقی نمایش داده می‌شوند */
    .admin-root .crud-table-wrapper,
    .admin-root .inv-history {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- فوتر و صفحه‌بندی ---------- */
    .admin-root .crud-footer {
        padding: 12px 10px;
    }

    .admin-root .crud-footer .page-btn {
        min-width: 40px;
        height: 40px;
    }

    /* ---------- مودال ---------- */
    .admin-root .modal-backdrop {
        padding: 10px;
        /* وقتی کیبورد موبایل باز می‌شود مودال از بالای صفحه می‌ماند و دکمه‌ها همیشه قابل اسکرول‌اند */
        align-items: center;
    }

    .admin-root .modal-box,
    .admin-root .modal-box.modal-lg {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 18px;
    }

    .admin-root .modal-header {
        padding: 14px 16px;
    }

    .admin-root .modal-body {
        padding: 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .admin-root .modal-close {
        width: 40px;
        height: 40px;
    }

    .admin-root .modal-body .form-control,
    .admin-root .modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    .admin-root .modal-box textarea,
    .admin-root .modal-box select {
        font-size: 16px;
        min-height: 44px;
    }

    .admin-root .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* دکمه‌های پایین فرم‌ها زیر هم و تمام‌عرض (انگشت شست به‌راحتی می‌رسد) */
    .admin-root .modal-body .modal-footer-inline {
        flex-wrap: wrap;
        gap: 10px;
    }

    .admin-root .modal-body .modal-footer-inline > .btn,
    .admin-root .modal-body .modal-footer-inline > button {
        flex: 1 1 140px;
        min-height: 46px;
        justify-content: center;
    }

    /* ---------- دیالوگ‌ها و ویرایشگر Radzen ---------- */
    .admin-root .rz-dialog,
    .rz-dialog-wrapper .rz-dialog {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .admin-root .rz-html-editor {
        max-width: 100%;
    }

    .admin-root .rz-html-editor-toolbar,
    .admin-root .rz-html-editor .rz-html-editor-toolbar {
        flex-wrap: wrap;
        height: auto;
    }

    /* ---------- کارت‌های آمار و فیلترها (بازدیدها، تخفیف‌ها، گزارش‌ها) ---------- */
    .admin-root .vst-stats,
    .admin-root .pr-stats,
    .admin-root .rv-adm-stats {
        gap: 10px;
    }
}

/* گوشی‌های کوچک (≤ 380px) */
@media (max-width: 380px) {
    .admin-root .content {
        padding: .6rem !important;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody {
        padding-inline: 8px;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr {
        padding-inline: 12px;
    }
}

/* حرکت کمتر برای کسانی که در تنظیمات گوشی «کاهش انیمیشن» را روشن کرده‌اند */
@media (prefers-reduced-motion: reduce) {
    .admin-root .crud-container,
    .admin-root .crud-table tbody tr {
        animation: none;
    }
}

/* ---------- اصلاحات نهایی کارت‌های موبایل ---------- */
@media (max-width: 640.98px) {
    /* اگر هیچ ستونِ قابل مرتب‌سازی نیست، ردیف خالی سرستون نمایش داده نشود */
    .admin-root .crud-card > .crud-table-wrapper > .crud-table > thead:not(:has(.sortable-header)) {
        display: none;
    }

    /* کادر دوم دور کارت‌ها حذف شود؛ هر ردیف خودش کارت است */
    .admin-root .crud-card:has(> .crud-table-wrapper > .crud-table),
    .admin-root .crud-card:has(> .crud-table-wrapper > .crud-table):hover {
        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        overflow: visible;
    }

    .admin-root .crud-card:has(> .crud-table-wrapper > .crud-table) > .crud-table-wrapper > .crud-table > tbody {
        padding-inline: 0;
    }

    .admin-root .crud-card:has(> .crud-table-wrapper > .crud-table) > .crud-footer {
        margin-top: 12px;
        border: 1px solid #c9deea;
        border-radius: 16px;
    }

    /* دکمه‌های عملیات در یک ردیف جا شوند */
    .admin-root .crud-card > .crud-table-wrapper > .crud-table > tbody > tr > td.actions-cell {
        gap: 6px;
    }

    .admin-root .crud-card > .crud-table-wrapper > .crud-table .btn-icon {
        width: 40px;
        height: 40px;
    }
}