/* ===================================================================
   توکن‌های Design System (بر اساس عکسی که فرستادید)
   =================================================================== */
:root {
    --color-primary: #2563EB;
    --color-primary-light: #DBEAFE;
    --color-secondary: #0F172A;
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-danger: #DC2626;
    --color-info: #0EA5E9;
    --color-purple: #7C3AED;
    --color-pink: #EC4899;
    --color-teal: #14B8A6;
    --color-gray-600: #475569;
    --color-gray-200: #E2E8F0;

    --font-sans: 'Vazirmatn', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
}

body.role-superadmin {
    font-family: var(--font-sans);
    background: #F8FAFC;
    color: var(--color-secondary);
}

.role-superadmin .role-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-6);
    background: #fff;
    border-bottom: 1px solid var(--color-gray-200);
}

.role-superadmin .role-header-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 18px;
}

.role-superadmin .role-header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.role-superadmin .role-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.role-superadmin .role-sidebar {
    width: 240px;
    background: var(--color-secondary);
    padding: var(--space-4) var(--space-2);
    flex-shrink: 0;
}

.role-superadmin .role-single-link a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--space-2);
    color: #CBD5E1;
    text-decoration: none;
    margin-bottom: var(--space-1);
    font-size: 14px;
}

.role-superadmin .role-single-link a:hover,
.role-superadmin .role-single-link a.active {
    background: var(--color-primary);
    color: #fff;
}

.role-superadmin .role-main {
    flex: 1;
    padding: var(--space-6);
}

/* --- کارت‌ها --- */
.sa-card {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--space-3);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.sa-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-4);
}

/* --- بج وضعیت --- */
.sa-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.sa-badge-active { background: #DCFCE7; color: var(--color-success); }
.sa-badge-trial { background: #FEF3C7; color: var(--color-warning); }
.sa-badge-suspended { background: #FEE2E2; color: var(--color-danger); }

/* --- سوییچ ماژول --- */
.sa-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.sa-module-row:last-child { border-bottom: none; }

.sa-module-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
}

.sa-module-core-tag {
    font-size: 11px;
    color: var(--color-gray-600);
    background: var(--color-gray-200);
    padding: 1px var(--space-1);
    border-radius: var(--space-1);
    margin-right: var(--space-2);
}

/* --- زیربخشِ داخلِ یک کارت (جای <hr> خام) --- */
.sa-subsection {
    padding-top: var(--space-6);
    margin-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}

.sa-subsection-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.sa-subsection-hint {
    font-size: 12px;
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

/* --- پیش‌نمایشِ تصویر/لوگو --- */
.sa-image-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.sa-image-preview img {
    height: 56px;
    width: 120px;
    object-fit: contain;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--space-2);
    padding: var(--space-1);
    background: #fff;
}

.sa-image-preview-empty {
    height: 56px;
    width: 120px;
    background: var(--color-gray-200);
    border-radius: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
    flex-shrink: 0;
}

.sa-image-preview-note {
    font-size: 13px;
    color: var(--color-gray-600);
}

/* --- آیتمِ تکرارشونده‌ی شماره‌دار (ویژگی/آمار/نشانِ اعتماد) --- */
.sa-repeatable-item {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.sa-repeatable-index {
    font-size: 12px;
    color: var(--color-gray-600);
    margin-bottom: var(--space-2);
}

.sa-icon-hint {
    font-size: 12px;
    color: var(--color-gray-600);
    margin-top: var(--space-1);
}

.sa-icon-hint a {
    color: var(--color-primary);
}

.sa-page-intro {
    font-size: 13px;
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
}

.sa-page-intro code {
    background: var(--color-gray-200);
    padding: 1px var(--space-1);
    border-radius: var(--space-1);
}

/* --- تب‌های صفحه (مدیریت صفحات) --- */
.sa-tabs .nav-link {
    color: var(--color-gray-600);
    font-weight: 500;
}

.sa-tabs .nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
}

.sa-tabs .nav-link i {
    margin-left: var(--space-1);
}

/* --- انتخاب‌گرِ آیکون (به‌جایِ تایپِ دستیِ نامِ آیکون) --- */
.icon-picker {
    position: relative;
    display: inline-block;
}

.icon-picker-toggle {
    width: 46px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.dropdown-menu.icon-picker-menu.show {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    min-width: 220px;
}

.icon-picker-option {
    border: 1px solid transparent;
    background: none;
    border-radius: var(--space-2);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-gray-600);
    cursor: pointer;
}

.icon-picker-option:hover {
    background: var(--color-gray-200);
}

.icon-picker-option.active {
    background: var(--blue-light, #EAF4FF);
    border-color: var(--color-primary);
    color: var(--color-primary);
}