/* ═══════════════════════════════════════════════════════════════════
   Flazza DDS · M3 · Canvas Layouts (Base)
   ─────────────────────────────────────────────────────────────────────
   يضبط سلوك anchors الأساسي:
     • كل عنصر بـ data-qzt-anchor يستخدم --qzt-offset-x/y عبر transform
       لإزاحة آمنة لا تكسر Flow.
     • إخفاء عبر [data-qzt-hidden="1"].
     • وضع التحرير (data-theme-editing="1" على <html>) يُظهر
       غشاء بصري خفيف + خطوط grid لتسهيل Snap.

   المحرر (M3) يحقن CSS إضافياً بشكل inline <style id="qzt-layouts">
   يُطبّق --qzt-offset-x/y لكل anchor مُعدَّل.
   ═══════════════════════════════════════════════════════════════════ */

[data-qzt-anchor] {
    --qzt-offset-x: 0px;
    --qzt-offset-y: 0px;
    transform: translate3d(var(--qzt-offset-x), var(--qzt-offset-y), 0);
    transition: transform calc(.15s * var(--qzt-motion-duration, 1)) var(--qzt-motion-ease, ease);
    will-change: transform;
}

[data-qzt-anchor][data-qzt-hidden="1"] {
    display: none !important;
}

/* ── وضع التحرير ─────────────────────────────────────
   يُفعَّل بإضافة data-theme-editing="1" على <html> داخل iframe المعاينة.
   يُظهر:
     • إطار مُنقَّط حول كل anchor
     • شارة تسمية صغيرة
     • cursor: grab
     • grid خفيف خلف المسرح لمساعدة محاذاة Snap 8px
*/
html[data-theme-editing="1"] body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(99, 102, 241, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
    background-size: 8px 8px;
    z-index: 2;
}

html[data-theme-editing="1"] [data-qzt-anchor] {
    outline: 1px dashed rgba(99, 102, 241, 0.5);
    outline-offset: 4px;
    cursor: grab;
    position: relative;
}

html[data-theme-editing="1"] [data-qzt-anchor]:hover {
    outline-color: rgba(99, 102, 241, 0.95);
    outline-style: solid;
}

html[data-theme-editing="1"] [data-qzt-anchor]::after {
    content: attr(data-qzt-anchor);
    position: absolute;
    inset-block-start: -22px;
    inset-inline-start: 0;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
    z-index: 999;
    white-space: nowrap;
}

html[data-theme-editing="1"] [data-qzt-anchor]:hover::after {
    opacity: 1;
}

/* العنصر الذي يُسحَب الآن */
html[data-theme-editing="1"] [data-qzt-anchor].qzt-dragging {
    cursor: grabbing;
    outline-color: #f59e0b;
    outline-style: solid;
    outline-width: 2px;
    opacity: .92;
    transition: none;
}
html[data-theme-editing="1"] [data-qzt-anchor].qzt-dragging::after {
    opacity: 1;
    background: #f59e0b;
}

/* العنصر المحدَّد (layer tree) */
html[data-theme-editing="1"] [data-qzt-anchor].qzt-selected {
    outline-color: #22d3ee;
    outline-style: solid;
    outline-width: 2px;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18);
}

/* عناصر غير قابلة للسحب (pinnable=false) — مُلاحظ بصرياً */
html[data-theme-editing="1"] [data-qzt-anchor][data-qzt-locked="1"] {
    cursor: not-allowed;
    outline-style: dotted;
    outline-color: rgba(148, 163, 184, 0.55);
}
html[data-theme-editing="1"] [data-qzt-anchor][data-qzt-locked="1"]:hover::after {
    background: #64748b;
    content: attr(data-qzt-anchor) ' · ثابت';
}

/* العناصر المُخفية في وضع التحرير تبقى ظاهرة بشفافية كي يمكن إظهارها */
html[data-theme-editing="1"] [data-qzt-anchor][data-qzt-hidden="1"] {
    display: initial !important;
    opacity: .35;
    filter: grayscale(.7);
}
html[data-theme-editing="1"] [data-qzt-anchor][data-qzt-hidden="1"]::before {
    content: '🙈';
    position: absolute;
    inset-inline-end: 8px;
    inset-block-start: 8px;
    font-size: 18px;
    z-index: 10;
}
