/* ═══════════════════════════════════════════════════════════════════════════
   ARTTOP — Depth Theme (v938) · طبقة العمق ثلاثية الأبعاد
   ───────────────────────────────────────────────────────────────────────────
   طبقة **إضافية** تُحمَّل بعد كل الأنماط ولا تُغيّر ألوان الهوية (Emerald Ledger) ولا
   أي markup: ظلال متعدّدة الطبقات · حافّة علوية مضيئة · لمعة زجاجية على رؤوس المودالات ·
   ضغطة ثلاثية الأبعاد للأزرار · رفعٌ عند المرور للبطاقات · أيقونات القائمة بتوهّج خفيف ·
   دخول المودال بمنظور. كلّها تُطفأ بـ`html[data-depth="off"]` وتسكن مع `prefers-reduced-motion`.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --dp-ink: 1, 26, 21;                         /* ظلّ الهوية (تيل داكن) بصيغة rgb */
  --dp-glow: 16, 185, 129;                     /* توهّج زمردي */
  --dp-ease: cubic-bezier(.2, .8, .2, 1);
  --dp-spring: cubic-bezier(.34, 1.4, .44, 1);
}

/* ── ① المودالات: عمق حقيقي + منظور دخول + لمعة الرأس ─────────────────────── */
html:not([data-depth="off"]) .modal-backdrop { perspective: 1400px; -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); }
html:not([data-depth="off"]) .modal,
html:not([data-depth="off"]) .prj-modal,
html:not([data-depth="off"]) .tm-modal {
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(var(--dp-ink), .06),
    0 12px 28px -12px rgba(var(--dp-ink), .28),
    0 40px 90px -30px rgba(var(--dp-ink), .55),
    0 0 80px -20px rgba(var(--dp-glow), .18);
  animation: dpModalIn .42s var(--dp-spring) both;
  transform-origin: 50% 40%;
}
@keyframes dpModalIn {
  from { opacity: 0; transform: translateY(22px) scale(.96) rotateX(6deg); }
  to   { opacity: 1; transform: none; }
}
html:not([data-depth="off"]) .modal-header,
html:not([data-depth="off"]) .prj-modal-h { position: relative; overflow: hidden; }
html:not([data-depth="off"]) .modal-header::after,
html:not([data-depth="off"]) .prj-modal-h::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    radial-gradient(120% 140% at 85% -20%, rgba(255,255,255,.22), transparent 55%);
}
html:not([data-depth="off"]) .modal-footer,
html:not([data-depth="off"]) .prj-modal-f { box-shadow: 0 -8px 20px -14px rgba(var(--dp-ink), .25); position: relative; z-index: 1; }

/* ── ② الأزرار: ضغطة ثلاثية الأبعاد (الهوية لا تتغيّر) ───────────────────────── */
html:not([data-depth="off"]) .btn-primary-action,
html:not([data-depth="off"]) .mu-primary:not(.neutral),
html:not([data-depth="off"]) .prj-btn.primary,
html:not([data-depth="off"]) .prj-btn.success,
html:not([data-depth="off"]) .login-screen .btn-primary {
  position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 6px 14px -6px rgba(var(--dp-ink), .45);
  transition: transform .14s var(--dp-ease), box-shadow .14s var(--dp-ease), filter .14s;
}
html:not([data-depth="off"]) .btn-primary-action:hover,
html:not([data-depth="off"]) .mu-primary:not(.neutral):hover,
html:not([data-depth="off"]) .prj-btn.primary:hover,
html:not([data-depth="off"]) .prj-btn.success:hover,
html:not([data-depth="off"]) .login-screen .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 10px 22px -8px rgba(var(--dp-ink), .5), 0 0 24px -8px rgba(var(--dp-glow), .45); filter: saturate(1.08); }
html:not([data-depth="off"]) .btn-primary-action:active,
html:not([data-depth="off"]) .mu-primary:active,
html:not([data-depth="off"]) .prj-btn:active,
html:not([data-depth="off"]) .login-screen .btn-primary:active { transform: translateY(1px) scale(.985); box-shadow: 0 2px 0 rgba(0,0,0,.2) inset, 0 3px 8px -4px rgba(var(--dp-ink), .4); }
/* تموّج النقر (تُضيفه depth_fx.js لحظة النقر ثم تُزيله) */
.dp-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.35); transform: translate(-50%, -50%) scale(0); animation: dpRipple .55s ease-out forwards; }
@keyframes dpRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ── ③ البطاقات: طبقات ظلّ + حافّة مضيئة + رفعٌ عند المرور ───────────────────── */
html:not([data-depth="off"]) .stat-card,
html:not([data-depth="off"]) .prj-kpi,
html:not([data-depth="off"]) .gd-kpi,
html:not([data-depth="off"]) .mu-tabs,
html:not([data-depth="off"]) .card {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(var(--dp-ink), .05), 0 2px 4px -2px rgba(var(--dp-ink), .08), 0 12px 28px -18px rgba(var(--dp-ink), .28);
  transition: transform .22s var(--dp-ease), box-shadow .22s var(--dp-ease);
}
html:not([data-depth="off"]) .stat-card:hover,
html:not([data-depth="off"]) .prj-kpi:hover,
html:not([data-depth="off"]) .gd-kpi:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(var(--dp-ink), .07), 0 8px 12px -8px rgba(var(--dp-ink), .18), 0 28px 48px -22px rgba(var(--dp-ink), .38), 0 0 40px -18px rgba(var(--dp-glow), .35); }
html:not([data-depth="off"]) .stat-icon { box-shadow: 0 1px 0 #fff inset, 0 6px 14px -8px rgba(var(--dp-ink), .35); background: linear-gradient(160deg, #ffffff, #ecfdf5); }

/* ── ④ القائمة الجانبية: أيقونات بتوهّج وعنصر نشط منقوش ──────────────────────── */
html:not([data-depth="off"]) .sidebar-item .sb-ico { filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); transition: filter .2s, transform .2s var(--dp-spring); }
html:not([data-depth="off"]) .sidebar-item:hover .sb-ico { transform: translateY(-1px) scale(1.06); }
html:not([data-depth="off"]) .sidebar-item.active .sb-ico { filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)) drop-shadow(0 0 7px rgba(52,211,153,.55)); }
html:not([data-depth="off"]) .sidebar-item.active { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 6px 16px -8px rgba(0,0,0,.45); }

/* ── ⑤ الشريط الموحّد وشريط المودال: زجاج خفيف ────────────────────────────────── */
html:not([data-depth="off"]) .mu-nav { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(255,255,255,.86) !important; }

/* ── ⑥ صفحة الدخول: ورقة تميل مع المؤشّر (depth_fx.js) + كرات ضوء عائمة + لمعة ── */
html:not([data-depth="off"]) .login-screen { perspective: 1600px; }
html:not([data-depth="off"]) .login-screen .login-card { transform-style: preserve-3d; will-change: transform; transition: box-shadow .3s var(--dp-ease); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 40px 100px -24px rgba(1,26,21,.62), 0 12px 30px -10px rgba(1,26,21,.38), 0 0 120px -30px rgba(var(--dp-glow), .35); }
html:not([data-depth="off"]) .login-screen .login-card.dp-tilting { animation: none; }
html:not([data-depth="off"]) .login-screen .dp-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); opacity: .55; mix-blend-mode: screen;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.75), rgba(52,211,153,.35) 40%, rgba(16,185,129,0) 70%); animation: dpOrb 18s ease-in-out infinite; }
html:not([data-depth="off"]) .login-screen .dp-orb:nth-child(2) { animation-duration: 24s; animation-delay: -6s; opacity: .4; }
html:not([data-depth="off"]) .login-screen .dp-orb:nth-child(3) { animation-duration: 30s; animation-delay: -12s; opacity: .3; }
@keyframes dpOrb { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(4vw, -3vh, 0) scale(1.08); } 66% { transform: translate3d(-3vw, 4vh, 0) scale(.94); } }
html:not([data-depth="off"]) .login-screen .lg-brand::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.06) 45%, transparent 60%); background-size: 250% 100%; animation: dpSheen 9s ease-in-out infinite; }
@keyframes dpSheen { 0%, 60%, 100% { background-position: 120% 0; } 30% { background-position: -20% 0; } }

/* ── ⑧ v941 · أزرار الإجراءات والحفظ والرجوع: تكبير ورفع عند المرور + توهّج + تلميح واضح ─────── */
html:not([data-depth="off"]) .action-btn,
html:not([data-depth="off"]) .prj-act,
html:not([data-depth="off"]) .pay-act-btn,
html:not([data-depth="off"]) .fs-act,
html:not([data-depth="off"]) .mu-ico,
html:not([data-depth="off"]) .boq-act-btn,
html:not([data-depth="off"]) .act-cell button,
html:not([data-depth="off"]) .row-actions button,
html:not([data-depth="off"]) .pay-act button,
html:not([data-depth="off"]) .fs-actions button,
html:not([data-depth="off"]) [data-gd-act],
html:not([data-depth="off"]) [data-gd-row-act],
html:not([data-depth="off"]) [data-pi-act],
html:not([data-depth="off"]) .pi-toggle,
html:not([data-depth="off"]) .gdt-mini-btn,
html:not([data-depth="off"]) .emp-attach-btn,
html:not([data-depth="off"]) .ol-tb-btn,
html:not([data-depth="off"]) .rec-actions button,
html:not([data-depth="off"]) .btn-primary-action,
html:not([data-depth="off"]) .btn-primary,
html:not([data-depth="off"]) .btn-success,
html:not([data-depth="off"]) .btn-danger,
html:not([data-depth="off"]) .btn-warning,
html:not([data-depth="off"]) .btn-secondary,
html:not([data-depth="off"]) .btn-info,
html:not([data-depth="off"]) .prj-btn,
html:not([data-depth="off"]) .fs-btn,
html:not([data-depth="off"]) .gd-outer-btn,
html:not([data-depth="off"]) .wfs-edit-btn,
html:not([data-depth="off"]) .tm-btn,
html:not([data-depth="off"]) .modal-footer .btn,
html:not([data-depth="off"]) .prj-modal-f .prj-btn,
html:not([data-depth="off"]) .cs-btn,
html:not([data-depth="off"]) .btn-outline,
html:not([data-depth="off"]) .btn-ghost {
  transition: transform .16s var(--dp-spring), box-shadow .16s var(--dp-ease), filter .16s; position: relative; will-change: transform;
}
html:not([data-depth="off"]) .action-btn:hover,
html:not([data-depth="off"]) .prj-act:hover,
html:not([data-depth="off"]) .pay-act-btn:hover,
html:not([data-depth="off"]) .fs-act:hover,
html:not([data-depth="off"]) .mu-ico:hover,
html:not([data-depth="off"]) .boq-act-btn:hover,
html:not([data-depth="off"]) .act-cell button:hover,
html:not([data-depth="off"]) .row-actions button:hover,
html:not([data-depth="off"]) .pay-act button:hover,
html:not([data-depth="off"]) .fs-actions button:hover,
html:not([data-depth="off"]) [data-gd-act]:hover,
html:not([data-depth="off"]) [data-gd-row-act]:hover,
html:not([data-depth="off"]) [data-pi-act]:hover,
html:not([data-depth="off"]) .pi-toggle:not(:disabled):hover,
html:not([data-depth="off"]) .gdt-mini-btn:hover,
html:not([data-depth="off"]) .emp-attach-btn:hover,
html:not([data-depth="off"]) .ol-tb-btn:hover,
html:not([data-depth="off"]) .rec-actions button:hover {
  transform: translateY(-2px) scale(1.18); z-index: 3;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 20px -10px rgba(var(--dp-ink), .5), 0 0 0 1px rgba(var(--dp-glow), .35), 0 0 18px -6px rgba(var(--dp-glow), .45);
  filter: saturate(1.15);
}
html:not([data-depth="off"]) .modal-footer .btn:hover,
html:not([data-depth="off"]) .prj-modal-f .prj-btn:hover,
html:not([data-depth="off"]) .cs-btn:hover,
html:not([data-depth="off"]) .btn-outline:hover,
html:not([data-depth="off"]) .btn-ghost:hover,
html:not([data-depth="off"]) .btn-primary-action:hover,
html:not([data-depth="off"]) .btn-primary:hover,
html:not([data-depth="off"]) .btn-success:hover,
html:not([data-depth="off"]) .btn-danger:hover,
html:not([data-depth="off"]) .btn-warning:hover,
html:not([data-depth="off"]) .btn-secondary:hover,
html:not([data-depth="off"]) .btn-info:hover,
html:not([data-depth="off"]) .prj-btn:hover,
html:not([data-depth="off"]) .fs-btn:hover,
html:not([data-depth="off"]) .gd-outer-btn:hover,
html:not([data-depth="off"]) .wfs-edit-btn:hover,
html:not([data-depth="off"]) .tm-btn:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 10px 22px -12px rgba(var(--dp-ink), .45); }
/* v955 — أزرار الشاشات (الشريط · الهيرو · الأدوات): رفعٌ هادئ 1.04 وتوهّج زمردي خفيف؛ التكبير 1.18 لأزرار الإجراءات الأيقونية وحدها */
html:not([data-depth="off"]) .btn-primary-action:hover,
html:not([data-depth="off"]) .prj-btn.primary:hover,
html:not([data-depth="off"]) .wfs-edit-btn:hover { box-shadow: 0 12px 24px -12px rgba(var(--dp-ink), .55), 0 0 0 1px rgba(var(--dp-glow), .35), 0 0 18px -6px rgba(var(--dp-glow), .4); }
html:not([data-depth="off"]) .btn:disabled:hover, html:not([data-depth="off"]) [disabled]:hover { transform: none !important; box-shadow: none !important; }
html:not([data-depth="off"]) .action-btn:active,
html:not([data-depth="off"]) .prj-act:active,
html:not([data-depth="off"]) .mu-ico:active,
html:not([data-depth="off"]) .act-cell button:active,
html:not([data-depth="off"]) .row-actions button:active { transform: translateY(0) scale(1.02); }
/* التلميح الواضح (depth_fx.js يرسمه من title الزرّ) */
.dp-tip { position: fixed; z-index: 2147483600; pointer-events: none; background: linear-gradient(135deg, #012b23, #014034); color: #fff; font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 9px;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 28px -12px rgba(1,26,21,.7), 0 0 0 1px rgba(16,185,129,.35); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  transform: translate(-50%, -6px) scale(.96); opacity: 0; animation: dpTip .14s var(--dp-spring) forwards; }
.dp-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: #014034; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.dp-tip.below { transform: translate(-50%, 6px) scale(.96); } .dp-tip.below::after { bottom: auto; top: -5px; }
@keyframes dpTip { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* ── ⑦ الهدوء الإلزامي: من طلب تقليل الحركة يأخذ العمق بلا حركة ───────────────── */
@media (prefers-reduced-motion: reduce) {
  html:not([data-depth="off"]) .modal, html:not([data-depth="off"]) .prj-modal, html:not([data-depth="off"]) .tm-modal { animation: none; }
  html:not([data-depth="off"]) .login-screen .dp-orb, html:not([data-depth="off"]) .login-screen .lg-brand::before { animation: none; }
  html:not([data-depth="off"]) .login-screen .login-card { transform: none !important; }
  .dp-ripple { display: none; }
  .dp-tip { animation: none; opacity: 1; transform: translate(-50%, 0); }
}