/**
 * Theming task (2026-09-07) - كل ألوان اللوحة في مكان واحد فقط. وضعان: "داكن" (افتراضي) و"فاتح"،
 * يُختاران عبر [data-theme] على <html> (يُضبَط بسكربت صغير في <head> قبل أول رسم - راجع manage.ejs/
 * index.ejs/dashboard.ejs - لمنع أي وميض). نفس أسماء المتغيرات وقيمها بالضبط في لوحة الألعاب
 * (GamesDashboard\public\theme.css) - "same variable names and scale" كما طُلِب.
 *
 * قاعدة صارمة: --accent (الماروني) يُستخدَم فقط للحدود/الأزرار/التمييز - أبداً كلون نص صغير مباشر على
 * خلفية داكنة (استُخدِم --accent-text المخصَّص لذلك، تباينه مضبوط بعناية بنفس نسب هذا الملف).
 * كل زوج نص/خلفية هنا تم قياسه فعلياً عبر Extras/contrastCheck.js (WCAG AA: 4.5:1 عادي، 3:1 كبير/رسومي)
 * - أي تعديل مستقبلي على قيمة يجب إعادة تشغيل render-test.js للتأكد من عدم كسر التباين.
 */

:root {
    --bg-body: #0a0c10;
    --panel-bg: #12161f;
    --card-inner: #181e2b;
    --card-inner-hover: #202840;
    --border-ui: #2c3547;

    /* الماروني - حدود/أزرار/تمييز فقط */
    --accent: #9B2C3A;
    --accent-strong: #7A1F2B;
    --accent-soft: rgba(155, 44, 58, 0.18);
    --accent-glow: rgba(155, 44, 58, 0.35);
    --accent-focus-ring: rgba(155, 44, 58, 0.25);
    /* نص صغير بلون مقارب للتمييز (وليس --accent نفسه) - تباين كافٍ على الخلفيات الداكنة */
    --accent-text: #FF8FA0;

    --text-primary: #F1F3F5;
    --text-secondary: #C9CED3;
    --text-heading: #FFFFFF;
    --placeholder: #9AA3AB;
    --on-accent: #FFFFFF;

    --success: #1E8449;
    --success-strong: #186A38;
    --danger: #C0392B;
    --danger-strong: #A5281C;
    --warning: #c9962c;
    --warning-text: #1a1400;

    /* شارة محايدة (رقم خانة لوحة الألوان) - فاتحة دوماً على الوضع الداكن */
    --chip-bg: #E3E5E8;
    --chip-text: #1E1E1E;

    --danger-soft: rgba(192, 57, 43, 0.12);
    --danger-soft-border: rgba(192, 57, 43, 0.4);

    --shadow-color: rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
    --bg-body: #F7F8FA;
    --panel-bg: #FFFFFF;
    --card-inner: #F0F1F4;
    --card-inner-hover: #E7E9EE;
    --border-ui: #DADFE5;

    --accent: #9B2C3A;
    --accent-strong: #7A1F2B;
    --accent-soft: rgba(155, 44, 58, 0.12);
    --accent-glow: rgba(155, 44, 58, 0.25);
    --accent-focus-ring: rgba(155, 44, 58, 0.18);
    --accent-text: #7A1F2B;

    --text-primary: #14181C;
    --text-secondary: #4B5560;
    --text-heading: #0B0E12;
    --placeholder: #5C6670;
    --on-accent: #FFFFFF;

    --success: #1E8449;
    --success-strong: #186A38;
    --danger: #C0392B;
    --danger-strong: #A5281C;
    --warning: #c9962c;
    --warning-text: #1a1400;

    /* معكوسة بالوضع الفاتح حتى تبقى الشارة مميَّزة فوق بطاقة فاتحة */
    --chip-bg: #22262B;
    --chip-text: #F1F3F5;

    --danger-soft: rgba(192, 57, 43, 0.08);
    --danger-soft-border: rgba(192, 57, 43, 0.35);

    --shadow-color: rgba(20, 24, 28, 0.12);
}

/* ============ مكوّنات عامة مشتركة بكل صفحات اللوحة (manage.ejs + index.ejs + dashboard.ejs) ============ */

body { background-color: var(--bg-body); color: var(--text-primary); }

a { color: var(--accent-text); }

/* بوتستراب .text-white ثابت أبيض دائماً - نُلزمه بلون العناوين المتغيّر حسب الثيم بدل الأبيض الحرفي
   (يظهر أبيض ثابتاً على خلفية بيضاء بالثيم الفاتح لولا هذا). العناصر التي تبقى بيضاء دائماً (فوق
   صور مرفوعة أو طبقات تحميل بخلفية داكنة ثابتة خاصة بها) تُستثنى بمُعرّفاتها أدناه. */
.text-white { color: var(--text-heading) !important; }
#rankRealPreviewLoading, #textPositionMarker, #realPreviewLoading { color: #fff !important; }
/* عناصر بخلفية بوتستراب داكنة ثابتة (bg-dark/bg-black) بغضّ النظر عن الثيم - نصّها الأبيض يبقى كما هو */
.bg-dark.text-white, .bg-dark .text-white,
.bg-black.text-white, .bg-black .text-white { color: #fff !important; }

.navbar-main { background: color-mix(in srgb, var(--panel-bg) 95%, transparent); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border-ui); padding: 16px 35px; }
.server-avatar { border: 2px solid var(--accent); }

.nav-pills .nav-link { color: var(--text-secondary); background: transparent; }
.nav-pills .nav-link:hover { color: var(--text-heading); background: var(--card-inner-hover); }
.nav-pills .nav-link.active { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 18px var(--accent-glow); }

.glass-panel { background: var(--panel-bg); border: 1px solid var(--border-ui); border-radius: 18px; padding: 26px; box-shadow: 0 10px 30px var(--shadow-color); }
.section-header { border-bottom: 1px solid var(--border-ui); }
.section-header h5, .section-header h6, .section-header h4 { color: var(--text-heading) !important; }

.form-label, label { color: var(--text-secondary); }
.form-control, .form-select { background-color: var(--card-inner); border: 1px solid var(--border-ui); color: var(--text-primary); border-radius: 10px; padding: 10px 14px; }
.form-control:focus, .form-select:focus { background-color: var(--card-inner); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-focus-ring); color: var(--text-primary); }
.form-control::placeholder { color: var(--placeholder); opacity: 1; }
.form-select option { background-color: var(--card-inner); color: var(--text-primary); }

.btn-action-save { background: linear-gradient(135deg, var(--success-strong), var(--success)); border: none; padding: 12px 35px; border-radius: 10px; font-weight: 700; color: var(--on-accent); cursor: pointer; }
.btn-action-save:hover { opacity: 0.9; }
.btn-flame-auto { background: linear-gradient(135deg, var(--accent-strong), var(--accent)); border: none; color: var(--on-accent); font-weight: 700; border-radius: 10px; }
.btn-flame-auto:hover { opacity: 0.9; color: var(--on-accent); }
.btn-send-panel { background: var(--accent); border: 1px solid var(--accent-strong); color: var(--on-accent); font-weight: 700; border-radius: 10px; }
.btn-send-panel:hover { background: var(--accent-strong); color: var(--on-accent); }

.filter-btn { background: var(--card-inner); border: 1px solid var(--border-ui); color: var(--text-secondary); border-radius: 8px; padding: 6px 14px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
.filter-btn.active, .filter-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.variable-tag { background: var(--accent-soft); border: 1px solid var(--accent-soft); color: var(--accent-text); padding: 4px 10px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; cursor: pointer; transition: 0.2s; display: inline-block; }
.variable-tag:hover { background: var(--accent); color: var(--on-accent); }

.help-tip { background: var(--card-inner-hover); color: var(--text-secondary); }
.protection-desc { color: var(--text-secondary); }

.ssel-list { background: var(--panel-bg); border: 1px solid var(--border-ui); box-shadow: 0 10px 28px var(--shadow-color); }
.ssel-item { color: var(--text-primary); }
.ssel-item:hover, .ssel-item.active { background: var(--card-inner-hover); }
.ssel-item .ssel-kind { color: var(--text-secondary); }
.ssel-empty { color: var(--text-secondary); }

.form-check-input { width: 2.8rem; height: 1.4rem; cursor: pointer; background-color: var(--card-inner); border: 1px solid var(--border-ui); }
.form-check-input:checked { background-color: var(--success); border-color: var(--success); }

.table-dark-custom { --bs-table-bg: transparent; color: var(--text-primary); border-color: var(--border-ui); }
.table-dark-custom th { color: var(--text-secondary); font-weight: 600; background: var(--card-inner); padding: 14px; border-bottom: 2px solid var(--border-ui); }
.table-dark-custom td { padding: 14px; border-bottom: 1px solid var(--border-ui); vertical-align: middle; color: var(--text-primary); }

.badge.bg-secondary { background-color: var(--card-inner-hover) !important; color: var(--text-primary) !important; }
.badge.bg-success { background-color: var(--success) !important; color: var(--on-accent) !important; }
.badge.bg-danger { background-color: var(--danger) !important; color: var(--on-accent) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: var(--warning-text) !important; }

.modal-content { background: var(--panel-bg); color: var(--text-primary); border: 1px solid var(--border-ui); }

.sidebar-group-title { color: var(--text-secondary); }
.save-bar-sticky { position: sticky; bottom: 0; z-index: 20; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--panel-bg) 92%, transparent) !important; }

.health-stat-card { background: var(--card-inner); border: 1px solid var(--border-ui); border-radius: 12px; padding: 14px 16px; height: 100%; }
.health-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.health-dot-ok { background: var(--success); box-shadow: 0 0 6px var(--success); }
.health-dot-bad { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

.viewer-mode-banner { background: var(--warning); color: var(--warning-text); }

/* منتقي عناصر (رتب/رومات) وشارات محدَّدة - تبويبات متعددة */
.selected-badge-box { background: var(--card-inner-hover); border: 1px solid var(--border-ui); border-radius: 10px; padding: 8px; min-height: 48px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.item-tag { background: var(--accent-soft); border: 1px solid var(--accent-soft); color: var(--accent-text); padding: 4px 10px; border-radius: 6px; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; }
.item-tag .remove-item { cursor: pointer; color: var(--danger); font-weight: bold; }

/* مكوّن الحماية الموحّد */
.protection-card { background: var(--card-inner); border: 1px solid var(--border-ui); border-radius: 14px; padding: 16px; }
.protection-card .protection-advanced { border-top: 1px dashed var(--border-ui); }
.protection-summary-bar { background: linear-gradient(135deg, var(--accent-soft), var(--panel-bg)); border: 1px solid var(--accent-soft); border-radius: 14px; padding: 14px 18px; }
.danger-zone-box { background: var(--danger-soft); border: 1px solid var(--danger-soft-border); border-radius: 12px; padding: 12px 16px; }

/* منتقي رتب/رومات قابل للبحث */
.ssel-item:hover, .ssel-item.ssel-active { background: var(--accent-soft); }

/* لوحة الألوان (تبويب الألوان) - صناديق المعاينة/خطة المزامنة وشارة رقم الخانة */
.colors-preview-box { background: var(--card-inner); border: 1px solid var(--border-ui); }
.colors-plan-box { background: var(--card-inner); color: var(--text-primary); border: 1px solid var(--border-ui); }
.colors-slot-badge { background: var(--chip-bg); color: var(--chip-text); }

/* معاينة الترحيب/المستويات (خلفية احتياطية خلف صورة المستخدم المرفوعة) */
.preview-fallback-bg { background-color: var(--card-inner); border: 2px solid var(--accent); }

/* قائمة الإيموجي المنسدلة (تبويب الرد التلقائي بالإيموجي) */
.emoji-select-opt:hover { background-color: var(--card-inner-hover); }

/* صفحتا index/dashboard (خارج manage.ejs) */
.card-box { background: var(--panel-bg); border: 1px solid var(--border-ui); }
.btn-discord { background-color: var(--accent); color: var(--on-accent); }
.btn-discord:hover { background-color: var(--accent-strong); color: var(--on-accent); }
.server-card { background: var(--panel-bg); border: 1px solid var(--border-ui); }
.server-icon { background: var(--card-inner); color: var(--text-primary); }

/* ============ زر تبديل الثيم (شمس/قمر) ============ */
.theme-toggle-btn {
    background: var(--card-inner);
    border: 1px solid var(--border-ui);
    color: var(--text-primary);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s;
}
.theme-toggle-btn:hover { background: var(--card-inner-hover); }

/* 2026-10-17 (المرحلة 3): وصف الخيار يظهر كسطر رمادي صغير بالتصميم الحالي بعد (theme-v3.css يلوّنه بالتصميم الجديد) */
.opt-desc { display: block; font-size: 12.8px; line-height: 1.55; margin-top: 4px; opacity: .72; font-weight: 400; }