/**
 * Theming task (2026-09-07) - كل ألوان اللوحة في مكان واحد فقط. وضعان: "داكن" (افتراضي) و"فاتح"،
 * يُختاران عبر [data-theme] على <html> (يُضبَط بسكربت صغير في <head> قبل أول رسم - راجع manage.ejs/
 * index.ejs/dashboard.ejs - لمنع أي وميض). نفس أسماء المتغيرات وقيمها بالضبط في لوحة System
 * (Dashboard\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;

    --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;

    --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; }
/* عناصر بخلفية بوتستراب داكنة ثابتة (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; }

.game-card { background: var(--card-inner); border: 1px solid var(--border-ui); border-radius: 14px; padding: 16px; height: 100%; }
.game-card .game-name { font-weight: 700; color: var(--text-heading); }
.game-card .game-desc { color: var(--text-secondary); font-size: 12.5px; }

.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); }

/* منتقي الإيموجي المبسَّط (Task 1) والمعاينات المرتبطة به */
.emoji-picker-select { background-color: var(--card-inner); border: 1px solid var(--border-ui); color: var(--text-primary); }

/* محرِّر بطاقة الفائز (Task 2) - صندوق المعاينة والمعاينات الحيّة */
.wc-preview-fallback-bg { background: var(--card-inner); }
#krPreview { background: var(--card-inner) !important; color: var(--text-primary) !important; }

/* صفحتا 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); }