/* ============================================================================
   Anima Studio Pro — UNIFIED DARK THEME (Override Layer)
   ----------------------------------------------------------------------------
   هذا الملف هو "مركز التحكم باللون" الوحيد للموقع بالكامل.
   - كل الألوان موحّدة من لون أساسي واحد (accent) + لون نص واحد (text).
   - لتغيير لون كل الأزرار:  بدّل قيمة  --ui-accent  أدناه فقط.
   - لتغيير لون كل النصوص:  بدّل قيمة  --ui-text  أدناه فقط.
   - لتغيير خلفية الموقع بالكامل: بدّل  --ui-bg  /  --ui-panel.
   تم تحميل هذا الملف أخيرًا لذلك تتغلب قيمه على بقية ملفات CSS.
   ============================================================================ */

:root {
    /* ───────── مركز التحكم: غيّر هذه القيم فقط ───────── */
    --ui-accent:        #6366f1;   /* اللون الموحّد لكل الأزرار والتمييز */
    --ui-accent-hover:  #7c83ff;   /* درجة أفتح عند المرور */
    --ui-accent-soft:   rgba(99, 102, 241, 0.14); /* خلفية شفافة للحالة النشطة */
    --ui-text:          #ffffff;   /* لون كل النصوص (أبيض كامل) */

    --ui-bg:            #0f1115;   /* خلفية الموقع الأساسية */
    --ui-panel:         #15171c;   /* خلفية الألواح الجانبية + التايم لاين + الهيدر */
    --ui-surface:       #1b1e25;   /* خلفية الأزرار/الحقول العادية */
    --ui-surface-hover: #262a33;   /* خلفية عند المرور */
    --ui-border:        #2a2e38;   /* لون الحدود الموحّد */

    /* ظل خفيف أنيق غير منتشر */
    --ui-shadow-soft:   0 2px 8px rgba(0, 0, 0, 0.28);
    --ui-shadow-edge:   0 1px 0 rgba(0, 0, 0, 0.35);

    /* ───────── ربط متغيّرات الموقع الأصلية بالنظام الموحّد ─────────
       (هكذا تتغيّر كل المكوّنات تلقائيًا عند تغيير القيم بالأعلى) */
    --bg-dark:      var(--ui-bg)      !important;
    --bg-panel:     var(--ui-panel)   !important;
    --bg-panel-alt: var(--ui-panel)   !important;
    --bg-hover:     var(--ui-surface-hover) !important;
    --bg-active:    var(--ui-surface-hover) !important;
    --bg-input:     #0c0e12          !important;

    --accent:       var(--ui-accent)       !important;
    --accent-hover: var(--ui-accent-hover) !important;
    --accent-dim:   var(--ui-accent-soft)  !important;
    --selected:     var(--ui-accent-soft)  !important;

    --text-main:    var(--ui-text) !important;
    --text-dim:     var(--ui-text) !important;
    --text-bright:  var(--ui-text) !important;

    --border:       var(--ui-border) !important;
    --border-light: var(--ui-border) !important;

    /* توحيد كل الألوان المتشتّتة إلى اللون الأساسي الواحد */
    --danger:       var(--ui-accent) !important;
    --success:      var(--ui-accent) !important;
    --audio-bg:     var(--ui-accent) !important;
    --media-bg:     var(--ui-accent) !important;
    --folder-bg:    var(--ui-accent) !important;
    --tween-color:  var(--ui-accent) !important;
    --mask-color:   var(--ui-accent) !important;
    --range-color:  var(--ui-accent-soft) !important;
}

/* ============================================================
   1) خلفية الموقع بالكامل + توحيد النصوص باللون الأبيض
   ============================================================ */
html, body {
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
}

/* جميع النصوص بيضاء بالكامل (مع الإبقاء على الأيقونات والحقول الخاصة) */
body, body *:not(svg):not(path):not(i),
.logo, label, h1, h2, h3, h4, h5, h6,
span, p, a, button, div, td, th, li, small, strong, b {
    color: var(--ui-text) !important;
}

/* استثناء: نص داخل الحقول النصية يبقى أبيض كذلك */
input, select, textarea {
    color: var(--ui-text) !important;
}
input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* الشعار يبقى أبيض ليتناسق مع باقي النصوص */
.logo { color: var(--ui-text) !important; }

/* ============================================================
   2) الألواح الجانبية (يسار/يمين) + الفيوبورت بنفس لون الموقع
   ============================================================ */
.panel {
    background: var(--ui-panel) !important;
    border-inline-start: 1px solid var(--ui-border) !important;
    border-inline-end: 1px solid var(--ui-border) !important;
    /* ظل خفيف أنيق غير منتشر على الحافة الداخلية */
    box-shadow: var(--ui-shadow-soft) !important;
}
.viewport {
    background: var(--ui-bg) !important;
}

/* عناوين المجموعات داخل الألواح بنفس اللون — مع إلغاء الأشرطة الملوّنة المتشتّتة
   (تتغلب هذه القواعد على الـ inline style لأن الـ inline لا يحمل !important) */
.group-header,
.group-content {
    background: var(--ui-panel) !important;
    color: var(--ui-text) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    border-bottom-color: var(--ui-border) !important;
}
.group-header:hover { background: var(--ui-surface-hover) !important; }
/* أيقونات عناوين المجموعات بيضاء أيضًا لتوحيد المظهر */
.group-header i, .group-header svg { color: var(--ui-text) !important; }

/* ============================================================
   3) الهيدر العلوي (اسم الموقع/البروفايل/المشاريع/التصدير)
      نفس لون الموقع + ظل خفيف أسفله فقط (غير منتشر)
   ============================================================ */
.header {
    background: var(--ui-panel) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============================================================
   4) التايم لاين — نفس لون الموقع + ظل خفيف علوي أنيق
   ============================================================ */
.timeline-panel {
    background: var(--ui-panel) !important;
    border-top: 1px solid var(--ui-border) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.30) !important;
}
.timeline-header,
.timeline-ruler-area {
    background: var(--ui-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.timeline-scroll-area {
    background: var(--ui-bg) !important;
}

/* ============================================================
   5) توحيد كل الأزرار — بما فيها زر التشغيل وزر التحويل (Bake)
      أصبحت جميعها بنفس شكل ولون الأزرار العادية
   ============================================================ */
.btn-toolbar,
.btn-primary,
.btn-bake,
.btn-danger,
.export-btn,
.tool-btn {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    font-weight: 600 !important;
}
.btn-toolbar:hover,
.btn-primary:hover,
.btn-bake:hover,
.btn-danger:hover,
.export-btn:hover,
.tool-btn:hover {
    background: var(--ui-surface-hover) !important;
    border-color: var(--ui-accent) !important;
    color: var(--ui-text) !important;
}

/* الأيقونات داخل الأزرار بيضاء كذلك */
.btn-toolbar i, .btn-toolbar svg,
.tool-btn i, .tool-btn svg,
.btn-primary i, .btn-bake i, .export-btn i {
    color: var(--ui-text) !important;
}

/* الحالة النشطة لأي زر = اللون الأساسي الموحّد */
.btn-toolbar.active,
.tool-btn.active,
#toolMove.active {
    background: var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}
#toolMove {
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ============================================================
   6) عناصر القوائم المنسدلة والحقول
   ============================================================ */
.anp-dropdown-menu {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-soft) !important;
}
.anp-dropdown-item { color: var(--ui-text) !important; }
.anp-dropdown-item:hover { background: var(--ui-surface-hover) !important; }

input[type="text"], input[type="number"], select, textarea {
    background: var(--bg-input) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    border-color: var(--ui-accent) !important;
    background: #14171d !important;
}
input[type="range"]     { accent-color: var(--ui-accent) !important; }
input[type="checkbox"]  { accent-color: var(--ui-accent) !important; }

/* ============================================================
   7) توحيد الألوان المتشتّتة في الطبقات/الفريمات إلى اللون الأساسي
   ============================================================ */
.layer-item.active {
    background: var(--ui-surface-hover) !important;
    border-right: 3px solid var(--ui-accent) !important;
}
.layer-item.selected,
.layer-item.folder-item.selected {
    background: var(--ui-accent-soft) !important;
    border-right: 3px solid var(--ui-accent) !important;
}
.layer-item.selected.active,
.layer-item.folder-item.active,
.layer-item.folder-item.selected.active {
    background: var(--ui-accent-soft) !important;
    border-right: 3px solid var(--ui-accent) !important;
}
.layer-item.media-item   { border-left: 2px solid var(--ui-accent) !important; }
.layer-item.folder-item  { background: var(--ui-panel) !important;
                           border-left: 3px solid var(--ui-accent) !important; }

/* تمييز صفحة الرسم النشطة بنفس اللون الموحّد بدل الأخضر */
.layer-item.active-draw-page {
    background: var(--ui-accent-soft) !important;
    border-right: 3px solid var(--ui-accent) !important;
    box-shadow: inset 0 0 0 1px var(--ui-accent-soft) !important;
}
.layer-item.active-draw-page::after { color: var(--ui-accent) !important; }
.layer-item.active-draw-layer.folder-item {
    border-left: 3px solid var(--ui-accent) !important;
    background: var(--ui-accent-soft) !important;
}
.layer-lock.is-locked { color: var(--ui-accent) !important; }
.is-masked { border-left: 3px solid var(--ui-accent) !important; }

/* الفريم المحدّد/النشط بنفس اللون الموحّد */
.frame.selected {
    outline: 2px solid var(--ui-accent) !important;
    box-shadow: 0 0 0 1px var(--ui-accent-soft) !important;
}
.frame.active {
    outline: 2px solid var(--ui-accent) !important;
    box-shadow: 0 0 6px var(--ui-accent-soft) !important;
}

/* ============================================================
   8) شريط تمرير موحّد + مقابض/فواصل
   ============================================================ */
::-webkit-scrollbar-thumb { background: var(--ui-border) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--ui-accent) !important; }
.tool-separator { background: var(--ui-border) !important; }
.layers-resize-handle:hover,
.layers-resize-handle.active {
    background: var(--ui-accent-soft) !important;
}

/* منتقي الألوان (color picker) يبقى داكنًا ومتناسقًا */
.anp-cp-popover {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-soft) !important;
    color: var(--ui-text) !important;
}