/* ════════════════════════════════════════════════════════════════════
   ✨ MAIN ENHANCEMENTS — تحسينات بصرية آمنة (إضافية فقط)
   ────────────────────────────────────────────────────────────────────
   ⚠️ ملف مستقل بالكامل — قابل للحذف بإزالة سطر <link> الخاص به فقط.
   ✅ لا يلمس position / overflow / z-index لأي عنصر — يحافظ على
      sticky/fixed/الـ stacking كما هو في الأصل.
   ✅ تحسينات: ألوان، أيقونات، انتقالات، حسّ ضوئي خفيف على البطاقات.
   ✅ يحترم prefers-reduced-motion.
   ✅ خفيف على الجوال — لا blur ثقيل، transforms صغيرة فقط.
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1) متغيّرات إضافية (لا تستبدل أي متغيّر قديم)
   ─────────────────────────────────────────────────────────────── */
:root{
  --primary-rgb:0,180,216;
  --enh-accent-violet:#8b5cf6;
  --enh-accent-mint:#06d6a0;
  --enh-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --enh-ease-out:cubic-bezier(.22,1,.36,1);
  --enh-dur-1:.18s;
  --enh-dur-2:.28s;
  --enh-ring:0 0 0 3px rgba(var(--primary-rgb),.22);
}
[data-theme="light"]{
  --primary-rgb:8,145,178;
}

/* ───────────────────────────────────────────────────────────────
   2) خلفية محيطية لطيفة — مدمجة في خلفية body مباشرة (لا pseudo)
   هذا أأمن أسلوب: ما يلمس position ولا z-index ولا stacking لأي عنصر.
   background-attachment: fixed → تبقى ثابتة عند التمرير.
   ─────────────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(circle at 92% 8%,  rgba(var(--primary-rgb),.08) 0%, transparent 38%),
    radial-gradient(circle at 8% 96%,  rgba(139,92,246,.06)         0%, transparent 38%),
    var(--bg);
  background-attachment:fixed, fixed, fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
[data-theme="light"] body{
  background:
    radial-gradient(circle at 92% 8%,  rgba(var(--primary-rgb),.06) 0%, transparent 40%),
    radial-gradient(circle at 8% 96%,  rgba(139,92,246,.04)         0%, transparent 40%),
    var(--bg);
  background-attachment:fixed, fixed, fixed;
}
/* الجوال: نلغي التدرّجات تماماً (أداء + بساطة) */
@media (max-width:768px){
  body, [data-theme="light"] body{
    background:var(--bg) !important;
    background-attachment:initial !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   3) Selection ملوّنة + Scrollbars متناسقة
   ─────────────────────────────────────────────────────────────── */
::selection{
  background:rgba(var(--primary-rgb),.30);
  color:#fff;
}
[data-theme="light"] ::selection{ background:rgba(var(--primary-rgb),.22); color:#0b1220; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(var(--primary-rgb),.45), rgba(139,92,246,.35));
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(var(--primary-rgb),.75), rgba(139,92,246,.55));
}
* { scrollbar-width:thin; scrollbar-color:rgba(var(--primary-rgb),.45) transparent; }

/* ───────────────────────────────────────────────────────────────
   4) Focus visible — حلقة أنيقة (box-shadow فقط — لا layout shift)
   ─────────────────────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.grid-tile:focus-visible,
.cmd-item:focus-visible{
  outline:none;
  box-shadow:var(--enh-ring) !important;
}

/* ───────────────────────────────────────────────────────────────
   5) صفحات الانتقال — fade-in أنعم (الموجود أصلاً ولكن easing أفضل)
   ─────────────────────────────────────────────────────────────── */
.app-page{ animation-timing-function:var(--enh-ease-out) !important; }

/* ───────────────────────────────────────────────────────────────
   6) عنوان الصفحة (page-header) — أيقونة بحلقة ملوّنة هادئة
   ─────────────────────────────────────────────────────────────── */
.page-header h2{ gap:12px; }
.page-header h2 > i:first-child{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px;
  background:rgba(127,127,127,.08);
  border:1px solid rgba(127,127,127,.14);
  font-size:.95rem !important;
  transition:transform var(--enh-dur-2) var(--enh-ease-spring);
}
@supports (background: color-mix(in srgb, red 10%, transparent)){
  .page-header h2 > i:first-child{
    background:
      radial-gradient(closest-side at 50% 35%, color-mix(in srgb, currentColor 28%, transparent), transparent 70%),
      color-mix(in srgb, currentColor 12%, transparent);
    border-color:color-mix(in srgb, currentColor 28%, transparent);
  }
}
.page-header h2:hover > i:first-child{ transform:rotate(-6deg) scale(1.06); }

/* ───────────────────────────────────────────────────────────────
   7) مربعات الرئيسية — التحسين الأهم (بدون transform يسبب اهتزاز)
   ─────────────────────────────────────────────────────────────── */
.grid-home{ gap:18px; }

.grid-tile{
  /* خلفية إضافية لطيفة فوق الأصلية — لا تغيير في الـ structure */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.04) 0%, transparent 60%),
    var(--card);
  transition:
    transform var(--enh-dur-2) var(--enh-ease-spring),
    box-shadow var(--enh-dur-2) var(--enh-ease-out),
    border-color var(--enh-dur-2) ease,
    background var(--enh-dur-2) ease;
}
[data-theme="light"] .grid-tile{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(2,32,71,.03) 0%, transparent 60%),
    var(--card);
}
.grid-tile:hover{
  /* رفع خفيف لا يكسر تخطيط الـ grid (لأن GRID يحجز المكان حسب الحجم الأساسي) */
  transform:translateY(-3px);
  box-shadow:
    0 10px 28px -12px rgba(0,0,0,.45),
    0 0 0 1px rgba(var(--primary-rgb),.18);
}
[data-theme="light"] .grid-tile:hover{
  box-shadow:
    0 8px 24px -10px rgba(2,32,71,.16),
    0 0 0 1px rgba(var(--primary-rgb),.28);
}
.grid-tile:active{ transform:translateY(-1px); transition-duration:.1s; }

/* أيقونة المربع — حاوية ملوّنة (Width/Height ثابتة → لا يهتز التخطيط)
   (2026-05-26) أُزيلت transition transform — لأن أي حركة على .tile-icon
   تتيح للمتصفح إعادة رسم الـ glyph إذا كان الـ Font Awesome تأخر تحميله،
   مما يوهم بأن المربع شغّال على hover. الآن نضمن الـ glyph ظاهر من
   البداية عبر font-ready-guard.js + opacity:1 الصريحة. */
.grid-tile .tile-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:15px;
  margin:0 auto 10px;
  background:rgba(127,127,127,.08);
  border:1px solid rgba(127,127,127,.14);
  position:relative;
  overflow:hidden;
  font-size:1.4rem !important;
}
@supports (background: color-mix(in srgb, red 10%, transparent)){
  .grid-tile .tile-icon{
    background:
      radial-gradient(closest-side at 50% 30%, color-mix(in srgb, currentColor 24%, transparent), transparent 72%),
      color-mix(in srgb, currentColor 10%, transparent);
    border-color:color-mix(in srgb, currentColor 22%, transparent);
  }
}
/* (2026-05-26) حذف:
   - .grid-tile:hover .tile-icon { transform:scale(1.08) rotate(-4deg); }
   - .grid-tile .tile-icon::after { ... shimmer ... }
   - .grid-tile:hover .tile-icon::after { ... }
   لأنها كانت تجعل الأيقونة تظهر فجأة عند hover (إيهام بحركة مقصودة بينما
   هو bug ظهور الـ glyph). الرفع على المربع نفسه يبقى — حلو ومايضر. */

/* الأرقام — تدرّج لطيف */
.grid-tile .tile-count{
  background:linear-gradient(180deg, currentColor 55%, currentColor 100%);
  -webkit-background-clip:text; background-clip:text;
  letter-spacing:-1px;
}
@supports (background: linear-gradient(0deg, currentColor 0%, transparent 100%)){
  .grid-tile .tile-count{
    background:linear-gradient(180deg, currentColor 60%, transparent);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* ───────────────────────────────────────────────────────────────
   8) أزرار — انتقالات + توهج ملوّن خفيف على hover (بدون رفع كبير)
   ─────────────────────────────────────────────────────────────── */
.a-btn{
  transition:
    transform var(--enh-dur-1) var(--enh-ease-spring),
    box-shadow var(--enh-dur-2) ease,
    background var(--enh-dur-2) ease,
    color var(--enh-dur-2) ease,
    border-color var(--enh-dur-2) ease,
    opacity var(--enh-dur-2) ease;
}
.a-btn:hover{ transform:translateY(-1px); }
.a-btn:active{ transform:translateY(0) scale(.98); }

/* أيقونة داخل زر — حركة طفيفة عند الـ hover */
.a-btn i{ transition:transform var(--enh-dur-2) var(--enh-ease-spring); }
.a-btn:hover i{ transform:translateX(-2px); }

/* outline — تعبئة أنيقة عند الـ hover */
.a-btn.outline:hover{
  background:rgba(var(--primary-rgb),.10);
  box-shadow:0 4px 14px -8px rgba(var(--primary-rgb),.40);
}

/* أزرار ملوّنة — توهج هادئ بلون الزر */
.a-btn.danger:hover{  box-shadow:0 4px 14px -6px rgba(239,68,68,.50); }
.a-btn.success:hover{ box-shadow:0 4px 14px -6px rgba(81,207,102,.50); }
.a-btn.warning:hover{ box-shadow:0 4px 14px -6px rgba(245,158,11,.50); }
.a-btn:not(.outline):not(.ghost):not(.danger):not(.success):not(.warning):hover{
  box-shadow:0 4px 14px -6px rgba(var(--primary-rgb),.45);
}

/* زر الرجوع — سهم ينزلق */
.back-btn i{ transition:transform var(--enh-dur-2) var(--enh-ease-spring); }
.back-btn:hover i{ transform:translateX(-5px); }

/* ───────────────────────────────────────────────────────────────
   9) بطاقات (a-card) — حدّ يتلوّن خفيف عند الـ hover (بدون رفع)
   ─────────────────────────────────────────────────────────────── */
.a-card{
  transition:
    border-color var(--enh-dur-2) ease,
    box-shadow var(--enh-dur-2) ease;
}
.a-card:hover{ border-color:rgba(var(--primary-rgb),.25); }

/* ───────────────────────────────────────────────────────────────
   10) Inputs — توهج عند التركيز
   ─────────────────────────────────────────────────────────────── */
.a-input{
  transition:
    border-color var(--enh-dur-2) ease,
    box-shadow var(--enh-dur-2) ease,
    background var(--enh-dur-2) ease;
}
.a-input:hover:not(:focus){ border-color:rgba(var(--primary-rgb),.30); }
.a-input:focus{
  box-shadow:0 0 0 4px rgba(var(--primary-rgb),.14);
}

/* ───────────────────────────────────────────────────────────────
   11) Top Bar — تدرّج لوني هادئ على اللوغو فقط (لا تغيير في الـ position)
   ─────────────────────────────────────────────────────────────── */
.topbar .logo{
  letter-spacing:-.01em;
}
@supports (-webkit-background-clip: text){
  .topbar .logo{
    background:linear-gradient(135deg, var(--primary), var(--enh-accent-violet));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.topbar .logo img{
  filter:drop-shadow(0 2px 6px rgba(var(--primary-rgb),.35));
  transition:transform var(--enh-dur-2) var(--enh-ease-spring);
}
.topbar .logo:hover img{ transform:rotate(-6deg) scale(1.06); }

.topbar .btn-logout{ border-radius:9px; }

.theme-toggle{
  border-radius:11px;
  transition:transform var(--enh-dur-2) var(--enh-ease-spring), background var(--enh-dur-2) ease, border-color var(--enh-dur-2) ease, box-shadow var(--enh-dur-2) ease;
}
.theme-toggle:hover{ transform:rotate(-12deg); }
.theme-toggle:active{ transform:scale(.92); }

/* ───────────────────────────────────────────────────────────────
   12) (2026-06-02) أُزيل قسم الشريط الجانبي — لا عنصر .sidebar بعد الآن
   ─────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────
   13) Modal — ظل أعمق فقط (Position الأصلي محفوظ — fixed)
   ─────────────────────────────────────────────────────────────── */
.modal-box{
  box-shadow:
    0 30px 70px -15px rgba(0,0,0,.55),
    0 0 0 1px rgba(var(--primary-rgb),.10);
}
[data-theme="light"] .modal-box{
  box-shadow:
    0 30px 70px -15px rgba(2,32,71,.16),
    0 0 0 1px rgba(var(--primary-rgb),.16);
}

/* ───────────────────────────────────────────────────────────────
   14) Toast — تحسين الظل
   ─────────────────────────────────────────────────────────────── */
.toast-item{
  border-radius:12px;
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* ───────────────────────────────────────────────────────────────
   15) Spinner — تدرّج لوني
   ─────────────────────────────────────────────────────────────── */
.spinner::after{
  border:3px solid transparent;
  border-top-color:var(--primary);
  border-right-color:var(--enh-accent-violet);
}

/* ───────────────────────────────────────────────────────────────
   16) صف الفيديو — انتقال أنعم على الصورة (بدون اهتزاز السطر)
   ─────────────────────────────────────────────────────────────── */
.vid-item{
  transition:
    border-color var(--enh-dur-2) ease,
    box-shadow var(--enh-dur-2) ease,
    background var(--enh-dur-2) ease;
}
.vid-item:hover{
  box-shadow:0 8px 20px -12px rgba(var(--primary-rgb),.30);
}
.vid-thumb{ overflow:hidden; }
.vid-thumb img{ transition:transform var(--enh-dur-2) var(--enh-ease-out); }
.vid-item:hover .vid-thumb img{ transform:scale(1.06); }

/* رتبة الفيديو — حلقة بلون الـ primary */
.vid-order{
  background:rgba(var(--primary-rgb),.10);
  border-color:rgba(var(--primary-rgb),.28);
}

/* ───────────────────────────────────────────────────────────────
   17) Drop zone — أيقونة تطفو لطيف
   ─────────────────────────────────────────────────────────────── */
.drop-zone{
  transition:border-color var(--enh-dur-2) ease, background var(--enh-dur-2) ease;
}
.drop-zone .dz-icon{
  transition:transform var(--enh-dur-2) var(--enh-ease-spring), color var(--enh-dur-2) ease;
}
.drop-zone:hover .dz-icon,
.drop-zone.drag-over .dz-icon{
  color:var(--primary);
  transform:translateY(-3px);
}

/* ───────────────────────────────────────────────────────────────
   18) Command Palette — انتقال + ظل (Position الأصلي fixed محفوظ)
   ─────────────────────────────────────────────────────────────── */
.cmd-box{
  box-shadow:
    0 30px 70px -15px rgba(0,0,0,.5),
    0 0 0 1px rgba(var(--primary-rgb),.18);
}
.cmd-item{ transition:background var(--enh-dur-1) ease, color var(--enh-dur-1) ease; }
.cmd-item i{ transition:transform var(--enh-dur-2) var(--enh-ease-spring); }
.cmd-item:hover i, .cmd-item.selected i{ transform:scale(1.15); }

/* ───────────────────────────────────────────────────────────────
   19) Chevrons (شيفرون الأكورديون) — انعطاف ناعم
   تبقى التحوّلات JS-driven في main.js كما هي، نضيف انتقال أنعم فقط.
   ─────────────────────────────────────────────────────────────── */
.fa-chevron-down{
  transition:transform .35s var(--enh-ease-spring) !important;
}
details[open] > summary .fa-chevron-down,
details[open] > summary i.fa-chevron-down{ transform:rotate(180deg); }

/* ───────────────────────────────────────────────────────────────
   20) Stats tiles — لمسة حدّ ملوّنة (بدون رفع — التخطيط grid)
   ─────────────────────────────────────────────────────────────── */
.fa-stat-tile{
  transition:border-color var(--enh-dur-2) ease, box-shadow var(--enh-dur-2) ease;
}
.fa-stat-tile:hover{
  box-shadow:0 6px 18px -10px rgba(var(--primary-rgb),.25);
}

/* ───────────────────────────────────────────────────────────────
   21) Bunny library cards — ثمبنيل ينعم (بدون تحريك البطاقة)
   ─────────────────────────────────────────────────────────────── */
.bunlib-card{
  transition:border-color var(--enh-dur-2) ease, box-shadow var(--enh-dur-2) ease;
}
.bunlib-thumb img{ transition:transform var(--enh-dur-2) var(--enh-ease-out); }
.bunlib-card:hover .bunlib-thumb img{ transform:scale(1.05); }

/* ───────────────────────────────────────────────────────────────
   22) شريط البحث الموحّد — توهّج عند التركيز (لا layout change)
   ─────────────────────────────────────────────────────────────── */
.req-search-bar{
  transition:border-color var(--enh-dur-2) ease, box-shadow var(--enh-dur-2) ease, background var(--enh-dur-2) ease;
}
.req-search-bar:focus-within{
  box-shadow:0 0 0 4px rgba(var(--primary-rgb),.10), 0 6px 20px -12px rgba(var(--primary-rgb),.40);
}

/* ───────────────────────────────────────────────────────────────
   23) Login card — هوية أقوى + لوغو يطفو لطيف (داخل البطاقة فقط)
   ─────────────────────────────────────────────────────────────── */
#pg-login .a-card{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(var(--primary-rgb),.10), transparent 60%),
    var(--card);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.5),
    0 0 0 1px rgba(var(--primary-rgb),.18);
}
[data-theme="light"] #pg-login .a-card{
  box-shadow:
    0 30px 80px -20px rgba(2,32,71,.18),
    0 0 0 1px rgba(var(--primary-rgb),.22);
}
#pg-login .a-card img{
  filter:drop-shadow(0 6px 18px rgba(var(--primary-rgb),.40));
  animation:enhLogoFloat 5s ease-in-out infinite;
}
@keyframes enhLogoFloat{
  0%,100%{ transform:translateY(0); }
  50%   { transform:translateY(-4px); }
}

/* ───────────────────────────────────────────────────────────────
   24) احترام prefers-reduced-motion — للوصولية الكاملة
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  #pg-login .a-card img{ animation:none !important; }
}

/* ───────────────────────────────────────────────────────────────
   25) الجوّال — تقليل حركة الـ hover (الموبايل لا يحتاجها فعلاً)
   ─────────────────────────────────────────────────────────────── */
@media (hover: none){
  .grid-tile:hover{ transform:none; }
  /* (2026-05-26) لا transform على .tile-icon أصلاً — تركها بدون شرط */
  .a-btn:hover{ transform:none; }
  .a-btn:hover i{ transform:none; }
  .back-btn:hover i{ transform:none; }
  .vid-item:hover .vid-thumb img{ transform:none; }
}