/* عارض الغرفة ثلاثية الأبعاد — مصمم الستائر، المرحلة 2.
 *
 * يعيش داخل #cd-preview-stage نفسه بجوار عارض البانوراما القديم والمعاينة
 * المسطّحة، ويظهر واحد منها فقط في كل لحظة. كل الألوان من رموز :root
 * الموجودة في style.css — لا لوحة ألوان جديدة ولا هوية مختلفة.
 */

.cd-room3d {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;              /* احتياطي للمتصفحات بلا :has() */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1b1e24;
  box-shadow: var(--shadow-card);
  touch-action: none;               /* الدوران باللمس لا يمرّر الصفحة */
}
.cd-room3d.hidden { display: none; }

/* ملء المساحة المتاحة حين يكون عارض 3D هو الظاهر — نفس أسلوب عارض 360
 * تماماً، والشرط :has() يقصر القاعدة على حالة ظهوره وحده فلا تتأثر المعاينة
 * المسطّحة ولا عارض البانوراما. */
.cd-preview-stage-wrap:has(.cd-room3d:not(.hidden)) {
  align-items: stretch;
  padding: 12px 16px;
}
.cd-preview-stage:has(> .cd-room3d:not(.hidden)) {
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cd-preview-stage:has(> .cd-room3d:not(.hidden)) > .cd-room3d {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 340px;
  max-height: 78vh;
}

.cd-room3d-host { position: absolute; inset: 0; }
.cd-room3d-host canvas.cd-room3d-canvas {
  display: block; width: 100%; height: 100%; cursor: grab; outline: none;
}
.cd-room3d-host canvas.cd-room3d-canvas:active { cursor: grabbing; }

/* ── أدوات الكاميرا ── */
/* inset-inline-start = أعلى اليمين في RTL — نفس ركن زر معايرة عارض 360،
 * حفاظاً على عرف واحد لأدوات العارض في المصمم كله. */
.cd-r3d-tools {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}
.cd-r3d-tool {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; padding: 0;
  background: rgba(24, 27, 33, .78); border: 1px solid rgba(255, 255, 255, .16);
  color: #e8eaed; transition: background .15s, border-color .15s;
}
.cd-r3d-tool:hover { background: rgba(24, 27, 33, .95); border-color: rgba(255, 255, 255, .3); }
.cd-r3d-tool.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cd-r3d-tool svg { width: 17px; height: 17px; display: block; }

/* ── الزوايا الجاهزة ── */
.cd-r3d-views {
  position: absolute; bottom: 10px; inset-inline-start: 50%; transform: translateX(50%);
  z-index: 4; display: flex; gap: 4px; padding: 4px;
  background: rgba(24, 27, 33, .78); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px; max-width: calc(100% - 20px); overflow-x: auto;
}
/* في RTL يكون translateX(50%) هو التوسيط الصحيح؛ وفي LTR يُعكس. */
html[dir="ltr"] .cd-r3d-views { transform: translateX(-50%); }
.cd-r3d-view {
  padding: 6px 12px; border-radius: 8px; cursor: pointer; border: none;
  background: transparent; color: #c9cdd3; font-size: 11.5px; font-weight: 600;
  font-family: inherit; white-space: nowrap; min-height: 30px;
}
.cd-r3d-view:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cd-r3d-view.active { background: var(--accent); color: #fff; }

/* ── شارة المقاس الحيّة ── */
.cd-r3d-badge {
  position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 3;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  background: rgba(24, 27, 33, .72); color: #e8eaed;
  padding: 5px 11px; border-radius: 9px; pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ── خطوط قياس الفتحة المحدَّدة ──
 * overflow:hidden حاجز أخير: حتى لو أفلت خط من فحوصات الإسقاط فلن يخرج عن
 * حدود العارض إلى بقية الصفحة. */
.cd-r3d-guides { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.cd-r3d-guide-line {
  position: absolute; height: 0; border-top: 2px dashed rgba(255,255,255,.92);
  transform-origin: 0 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.cd-r3d-guide-line.cd-r3d-guide-floor { border-top-style: dotted; border-top-color: rgba(255,255,255,.6); }
.cd-r3d-guide-line.cd-r3d-guide-side { border-top-style: dotted; border-top-color: rgba(255,255,255,.6); }
/* الخطان الثانويان (عن الأرض / من الحائط) أخفت من قياسَي الستارة الأساسيين */
.cd-r3d-guide-line.cd-r3d-guide-floor span,
.cd-r3d-guide-line.cd-r3d-guide-side span { background: rgba(17,19,24,.72); font-weight: 600; font-size: 10.5px; }
/* العنوان طبقة شاشة مستقلة: لا يرث دوران الخط، ولا يتغيّر حجمه مع التقريب،
 * ويُوضَع بإحداثيات يحسبها resolveMeasurementLabelCollisions بعد الإسقاط. */
.cd-r3d-guide-label {
  position: absolute; transform: translate(-50%, -50%); z-index: 5;
  background: rgba(17,19,24,.88); color: #fff; font-size: 11px; font-weight: 700;
  white-space: nowrap; padding: 3px 9px; border-radius: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  pointer-events: none;
}
.cd-r3d-guide-label.cd-r3d-guide-minor {
  background: rgba(17,19,24,.74); font-weight: 600; font-size: 10.5px; padding: 2px 7px;
}
/* خط ربط رفيع يصل العنوان بقياسه حين يُزاح بعيداً عنه */
.cd-r3d-guide-leader {
  position: absolute; height: 0; z-index: 4; display: none;
  border-top: 1px solid rgba(255,255,255,.55);
  transform-origin: 0 0; pointer-events: none;
}

/* ── طبقة الخطأ ── */
.cd-r3d-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(24, 27, 33, .94); color: #e8eaed; text-align: center; padding: 20px;
}
.cd-r3d-overlay.hidden { display: none; }
.cd-r3d-msg { font-size: 13px; font-weight: 600; line-height: 1.75; max-width: 360px; }

/* ── لوحة خصائص الغرفة (الجزء الأيمن في RTL) ── */
.cd-room-color-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cd-color-field { display: flex; flex-direction: column; gap: 5px; }
.cd-color-field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cd-color-field input[type="color"] {
  width: 100%; height: 38px; padding: 3px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.cd-room-summary {
  margin-top: 6px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); line-height: 1.85;
}
.cd-room-summary b { color: var(--text); font-variant-numeric: tabular-nums; }

.cd-room-note {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid transparent;
  color: var(--accent-mid, var(--accent)); font-size: 11.5px; line-height: 1.8;
}

.cd-room-divider { height: 1px; background: var(--border); margin: 18px 0 14px; }

/* ── اختيار الحائط ── */
.cd-wall-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.cd-wall-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid var(--border); background: var(--panel-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  font-family: inherit; text-align: start; min-height: 40px;
}
.cd-wall-chip:hover { border-color: var(--border-2); }
.cd-wall-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-mid, var(--accent)); }
.cd-wall-chip-count {
  font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--border-2); color: var(--panel);
}
.cd-wall-chip.active .cd-wall-chip-count { background: var(--accent); color: #fff; }

/* ── أزرار إضافة الفتحات ── */
.cd-opening-actions { display: flex; gap: 8px; margin-bottom: 4px; }
.cd-opening-actions button { flex: 1; }

/* ── قائمة الفتحات ── */
.cd-openings-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.cd-opening-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: var(--panel); cursor: pointer; font-size: 12.5px;
  font-family: inherit; text-align: start; width: 100%; color: var(--text);
}
.cd-opening-row:hover { border-color: var(--border-2); }
.cd-opening-row.active { border-color: var(--accent); background: var(--accent-soft); }
.cd-opening-kind {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.cd-opening-row.active .cd-opening-kind { background: var(--accent); color: #fff; }
.cd-opening-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-opening-size { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-openings-empty { font-size: 12px; color: var(--muted); padding: 10px 2px; }

/* ── خصائص الفتحة ── */
.cd-opening-props {
  margin-top: 12px; padding: 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel-2);
}
.cd-opening-props.hidden { display: none; }
.cd-opening-props-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px; font-size: 13px; font-weight: 700;
}
.cd-opening-props-tools { display: flex; gap: 5px; }
.cd-icon-btn {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-2);
  font-size: 13px; line-height: 1; font-family: inherit;
}
.cd-icon-btn:hover { border-color: var(--border-2); }
.cd-icon-btn.cd-icon-danger:hover { border-color: var(--error); color: var(--error); }
.cd-opening-slider { width: 100%; accent-color: var(--accent); cursor: pointer; }

/* ── ربط الشباك بالستارة (المرحلة 4) ── */
.cd-link-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.cd-link-box.hidden { display: none; }
.cd-link-btn { width: 100%; }
.cd-link-state, .cd-link-drift {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.7;
}
.cd-link-state.hidden, .cd-link-drift.hidden { display: none; }
/* أزرق يطابق لون الإطار في المشهد، فالرابط البصري واضح بلا شرح */
.cd-link-state { background: rgba(37, 99, 235, .1); color: #2563eb; font-weight: 600; }
.cd-link-drift { background: var(--warn-soft); color: var(--warn); margin-top: 8px; font-weight: 600; }
.cd-link-state button, .cd-link-drift button { flex-shrink: 0; }
#cd-link-hint { margin-top: 7px; }

/* ── الستارة ثلاثية الأبعاد (المرحلة 5) ── */
.cd-r3d-preview-btn {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 4;
  padding: 8px 14px; border-radius: 9px; cursor: pointer; min-height: 34px;
  background: rgba(24, 27, 33, .78); border: 1px solid rgba(255, 255, 255, .16);
  color: #e8eaed; font-size: 12px; font-weight: 600; font-family: inherit; white-space: nowrap;
}
.cd-r3d-preview-btn:hover { background: rgba(24, 27, 33, .95); border-color: rgba(255, 255, 255, .3); }
.cd-r3d-preview-btn.hidden { display: none; }

/* مقاس الشباك المرجعي في خطوة المقاس */
.cd-window-ref {
  padding: 10px 12px; margin-bottom: 14px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--border);
}
.cd-window-ref.hidden { display: none; }
.cd-window-ref-row {
  display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 10px;
  align-items: center; font-size: 12px; color: var(--muted);
}
.cd-window-ref-row b { color: var(--text); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cd-window-ref-note {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--text-2); line-height: 1.75;
}

/* مصدر المقاس داخل خطوة المقاس */
.cd-measure-source {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; margin-bottom: 14px; border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, .1); color: #2563eb;
  font-size: 12px; font-weight: 600; line-height: 1.7;
}
.cd-measure-source.hidden { display: none; }
.cd-measure-source button { flex-shrink: 0; }

/* ── ملء الشاشة ── */
.cd-room3d:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.cd-preview-stage:fullscreen { max-width: none; }

/* ── الأجهزة اللوحية والشاشات الضيقة ──
 * لوحة الإعدادات عرضها ثابت 440px، فعند ~1024px لا يبقى للعارض إلا ~330px
 * وهو أضيق من اللوحة نفسها. تضييق اللوحة في هذا النطاق يعيد التوازن، والقاعدة
 * مقصورة على ظهور عارض 3D فقط فلا تتأثر بقية الخطوات ولا المعاينة المسطّحة. */
@media (min-width: 901px) and (max-width: 1180px) {
  .cd-body:has(.cd-room3d:not(.hidden)) { grid-template-columns: 340px 1fr; }
}

/* ── الجوال ── */
@media (max-width: 900px) {
  .cd-room3d { aspect-ratio: 3 / 2; }
  /* صف المعاينة في التخطيط العام ارتفاعه 40vh، بينما عارض الغرفة يطلب 58vh.
   * بلا هذه القاعدة يفيض العارض من صفّه ويُرسَم فوق لوحة الإعدادات. جعل
   * الصف يتمدّد مع محتواه يحلّ التعارض، والصفحة كلها تُمرَّر كالمعتاد. */
  /* التخطيط العام يعطي صف المعاينة 40vh، بينما كان العارض يطلب 58vh مستقلاً
   * عن صفّه، فيفيض منه ويُرسم فوق لوحة الإعدادات. الحل: الصف نفسه يصير 58vh
   * والعارض يملأ صفّه بدل أن يفرض ارتفاعاً خاصاً به. */
  .cd-body:has(.cd-room3d:not(.hidden)) { grid-template-rows: 58vh 1fr; }
  .cd-preview-stage-wrap:has(.cd-room3d:not(.hidden)) { padding: 10px; overflow: hidden; }
  .cd-preview-stage:has(> .cd-room3d:not(.hidden)) { height: 100%; display: flex; }
  .cd-preview-stage:has(> .cd-room3d:not(.hidden)) > .cd-room3d {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  /* أهداف لمس أكبر، وأدوات أصغر عرضاً حتى لا تزاحم المشهد. */
  .cd-r3d-tool { width: 38px; height: 38px; }
  .cd-r3d-view { padding: 7px 11px; min-height: 34px; }
  .cd-r3d-views { bottom: 8px; }
  .cd-r3d-badge { display: none; }
  .cd-room-color-row { grid-template-columns: 1fr; }
}

/* ── المرحلة 6: شريط التراجع/الإعادة وإشعار التصميم القديم ──
 * كلاهما داخل لوحة الإعدادات لا فوق المشهد، فلا يزاحمان أدوات العارض. */
.cd-room-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cd-room-histbtn {
  padding: 6px 12px; font-size: 12.5px; min-height: 32px;
  font-variant-numeric: tabular-nums;
}
.cd-room-histbtn:disabled { opacity: .42; cursor: not-allowed; }
.cd-room-dirty {
  margin-inline-start: auto; font-size: 11.5px; font-weight: 600;
  color: #b45309; background: rgba(245, 158, 11, .13);
  border: 1px solid rgba(245, 158, 11, .3);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

.cd-legacy-notice {
  margin: 0 0 14px; padding: 13px 15px;
  border: 1px solid var(--border); border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--panel-2);
}
.cd-legacy-text { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.8; }
.cd-legacy-text span { display: block; margin-top: 3px; font-weight: 400; font-size: 12.5px; color: var(--text-2); }
.cd-legacy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
/* غرفة محفوظة تعذّرت قراءتها: تحذير لا دعوة إلى إجراء */
.cd-legacy-notice.cd-legacy-danger { border-inline-start-color: var(--danger, #d64545); }

[data-theme="dark"] .cd-room-dirty {
  color: #fcd34d; background: rgba(217, 119, 6, .16); border-color: rgba(217, 119, 6, .34);
}

/* ── حالة الستارة بجوار كل شباك (§8) ──
 * تُظهر أي الشبابيك صُمِّمت ستائرها وأيها ما زال فارغاً، مع الإجراء المناسب. */
.cd-opening-curtain-row {
  display: flex; align-items: center; gap: 8px;
  margin: -2px 0 8px; padding: 6px 10px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.cd-opening-curtain-row.has-curtain { border-style: solid; border-color: rgba(34,197,94,.42); }
.cd-opening-curtain-tag {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  margin-inline-end: auto;
}
.cd-opening-curtain-row.has-curtain .cd-opening-curtain-tag { color: #15803d; }
[data-theme="dark"] .cd-opening-curtain-row.has-curtain .cd-opening-curtain-tag { color: #4ade80; }

/* ── «المزيد»: النقل الصريح للستارة (إجراء ثانوي) ── */
.cd-link-more { margin-top: 8px; }
.cd-link-more-toggle {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.cd-link-more-toggle:hover { color: var(--text); }
.cd-link-more-menu {
  margin-top: 6px; padding: 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel-2);
}
.cd-link-more-menu.hidden { display: none; }