/* ============================================================
   «برج شركتنا العقارية» — مشهد الطاقة التشغيلية
   الشركة مبنى: الأدوار إدارات، النوافذ موظفون، الأساسات جاهزية
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Tajawal', sans-serif;
  background: #0a1f13;
  color: #e8f0ea;
  -webkit-font-smoothing: antialiased;
}

/* ---------- السماء والمشهد ---------- */
.scene-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(61,154,102,.18), transparent 60%),
    radial-gradient(ellipse 40% 30% at 15% 20%, rgba(201,162,75,.07), transparent 70%),
    linear-gradient(180deg, #071510 0%, #0a1f13 45%, #08291d 100%);
  position: relative;
  overflow: hidden;
}
.stars { position:absolute; inset:0; pointer-events:none; opacity:.7; }
.stars i {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#f1cd79; opacity:.35; animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.15} 50%{opacity:.6} }

.font-amiri { font-family:'Amiri', serif; }

/* ---------- البرج ---------- */
.tower-wrap {
  display:flex; flex-direction:column; align-items:center;
  position:relative; padding-top:8px;
}

.floor-row {
  display:flex; align-items:center; gap:14px;
  margin-bottom:5px; position:relative;
  opacity:0; transform:translateY(26px);
  transition: opacity .55s ease, transform .55s ease;
}
.floor-row.on { opacity:1; transform:translateY(0); }

/* جسم الدور */
.floor {
  position:relative;
  background: linear-gradient(180deg, #16382a 0%, #10291d 100%);
  border:1px solid #2b5a41;
  border-radius:4px;
  padding:7px 9px 6px;
  display:flex; gap:4px; align-items:center; justify-content:center;
  min-height:40px;
  box-shadow: 0 3px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transition: box-shadow .3s;
  cursor:default;
}
.floor:hover { box-shadow: 0 3px 20px rgba(201,162,75,.25), inset 0 1px 0 rgba(255,255,255,.08); }

/* النوافذ = الموظفون */
.win {
  width:20px; height:26px; border-radius:2.5px;
  background:#0c1f15; border:1px solid rgba(255,255,255,.08);
  position:relative; flex-shrink:0;
  transition: background .5s, box-shadow .5s;
}
.win.lit-g { background:linear-gradient(180deg,#2ba375,#218a62); box-shadow:0 0 8px rgba(61,154,102,.5); }
.win.lit-y { background:linear-gradient(180deg,#eab308,#ca8a04); box-shadow:0 0 8px rgba(234,179,8,.5); }
.win.lit-o { background:linear-gradient(180deg,#fb923c,#ea580c); box-shadow:0 0 9px rgba(251,146,60,.55); }
.win.lit-r { background:linear-gradient(180deg,#f87171,#dc2626); box-shadow:0 0 11px rgba(220,38,38,.65); animation: winPulse 1.6s ease-in-out infinite; }
.win.lit-gold { background:linear-gradient(180deg,#f1cd79,#c9963f); box-shadow:0 0 8px rgba(201,162,75,.5); }
.win.new {
  background:linear-gradient(180deg,#f87171,#b91c1c);
  border:1.5px dashed #fecaca;
  box-shadow:0 0 12px rgba(220,38,38,.7);
  animation: newWin .6s ease both;
}
@keyframes winPulse { 0%,100%{box-shadow:0 0 6px rgba(220,38,38,.4)} 50%{box-shadow:0 0 16px rgba(220,38,38,.9)} }
@keyframes newWin { from{transform:scale(0); opacity:0} to{transform:scale(1); opacity:1} }

/* دور مختنق: توهج + اهتزاز خفيف */
.floor.jam {
  border-color:#dc2626;
  box-shadow: 0 0 18px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.05);
  animation: jamShake 3.5s ease-in-out infinite;
}
@keyframes jamShake { 0%,92%,100%{transform:translateX(0)} 94%{transform:translateX(-1.5px)} 96%{transform:translateX(1.5px)} 98%{transform:translateX(-1px)} }

/* دور شاغر */
.floor.vacant {
  background:repeating-linear-gradient(45deg, #101f17 0 8px, #0c1a12 8px 16px);
  border:1.5px dashed #7f1d1d;
  min-width:120px;
}
.vacant-tag { font-size:11px; color:#fca5a5; font-weight:700; letter-spacing:.3px; }

/* السطح الذهبي (الإدارة) */
.floor.penthouse {
  background:linear-gradient(180deg,#2a2412 0%, #1c180c 100%);
  border-color:#c9963f;
  border-radius:8px 8px 4px 4px;
}
.roof-line {
  height:5px; border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,#c9963f,#f1cd79,#c9963f);
  margin-bottom:4px;
  box-shadow:0 0 10px rgba(201,162,75,.4);
}

/* لافتة الدور */
.floor-tag { min-width:150px; max-width:170px; text-align:right; line-height:1.35; }
.floor-tag .fname { font-size:12.5px; font-weight:700; color:#cfe3d6; }
.floor-tag .fmeta { font-size:11px; color:#7da48c; }
.util-badge {
  display:inline-block; font-size:10.5px; font-weight:800; padding:1px 7px;
  border-radius:999px; margin-inline-start:4px;
}

/* الدور الجديد (المشروع) */
.floor.ghost {
  background:rgba(45,212,191,.08);
  border:1.5px dashed #2dd4bf;
  color:#5eead4;
  animation: floorDrop .8s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes floorDrop { from{transform:translateY(-70px); opacity:0} to{transform:translateY(0); opacity:1} }

/* الرافعة */
.crane {
  position:relative; height:74px; width:100%; max-width:230px;
  margin:0 auto 2px; opacity:0; transition:opacity .5s;
}
.crane.show { opacity:1; }
.crane .mast { position:absolute; right:18%; bottom:0; width:5px; height:64px; background:repeating-linear-gradient(180deg,#e3b65b 0 6px, #8a6d2a 6px 12px); }
.crane .jib { position:absolute; right:calc(18% - 118px); bottom:58px; width:150px; height:5px; background:repeating-linear-gradient(90deg,#e3b65b 0 8px, #8a6d2a 8px 16px); }
.crane .cable { position:absolute; right:calc(18% - 82px); bottom:22px; width:1.5px; height:38px; background:#f1cd79; animation: cableSwing 3s ease-in-out infinite; transform-origin: top center; }
.crane .hook { position:absolute; right:calc(18% - 88px); bottom:12px; font-size:13px; color:#f1cd79; animation: cableSwing 3s ease-in-out infinite; }
@keyframes cableSwing { 0%,100%{transform:rotate(2deg)} 50%{transform:rotate(-2deg)} }

/* ---------- الأرض والأساسات ---------- */
.ground {
  width:100%;
  height:10px; margin-top:4px;
  background:linear-gradient(90deg, transparent, #3b5c48 15%, #3b5c48 85%, transparent);
  border-radius:99px;
  position:relative;
}
.ground::after {
  content:''; position:absolute; inset:auto 8% -18px;
  height:16px;
  background:repeating-linear-gradient(-45deg, rgba(120,150,130,.25) 0 3px, transparent 3px 9px);
}
.foundation-zone { width:100%; max-width:420px; margin-top:26px; }
.slab {
  background:linear-gradient(180deg,#152a1e,#0e1f15);
  border:1px solid #33604a;
  border-radius:4px;
  padding:7px 12px;
  margin-bottom:6px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  position:relative;
}
.slab.empty { border:1.5px dashed #7f1d1d; background:repeating-linear-gradient(45deg,#180e0e 0 8px,#120b0b 8px 16px); }
.slab.empty::after {
  content:''; position:absolute; left:22%; top:-1px; width:34px; height:calc(100% + 2px);
  background:
    linear-gradient(105deg, transparent 47%, rgba(220,38,38,.55) 49%, transparent 51%),
    linear-gradient(75deg, transparent 46%, rgba(220,38,38,.4) 49%, transparent 52%);
  pointer-events:none;
}
.slab .sname { font-size:12.5px; font-weight:700; color:#cfe3d6; }
.slab .smeta { font-size:11px; color:#7da48c; }

/* عداد صلابة الأساسات */
.found-meter { border:1px solid #2b5a41; border-radius:14px; padding:14px 18px; background:rgba(13,40,24,.6); backdrop-filter:blur(4px); }
.found-track { height:14px; border-radius:99px; background:#0c1f15; overflow:hidden; position:relative; }
.found-fill {
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,#dc2626,#ea580c 35%,#ca8a04 55%,#16a34a 75%,#0d9488);
  transition:width 1s cubic-bezier(.2,.8,.3,1);
}
.found-mark { position:absolute; top:-4px; bottom:-4px; width:2px; background:rgba(255,255,255,.55); }

/* ---------- لوحة التحكم ---------- */
.panel-card {
  background:rgba(13,40,24,.72);
  border:1px solid #2b5a41;
  border-radius:16px;
  backdrop-filter: blur(6px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.chip {
  border:1.5px solid #2b5a41; border-radius:12px;
  padding:9px 8px; font-size:12.5px; font-weight:700; color:#a9c7b5;
  background:rgba(16,41,29,.6);
  cursor:pointer; transition:all .2s; text-align:center; line-height:1.4;
  user-select:none;
}
.chip:hover { border-color:#2ba375; color:#e8f0ea; }
.chip.act {
  background:linear-gradient(135deg,#1a7350,#115b3e);
  border-color:#e3b65b; color:#fff;
  box-shadow:0 3px 14px rgba(201,162,75,.25);
}
.chip small { display:block; font-weight:400; font-size:10.5px; color:#7da48c; margin-top:2px; }
.chip.act small { color:#f1cd79; }

/* بانر الحكم */
.verdict {
  border-radius:14px; padding:16px 18px;
  border:1.5px solid; line-height:1.8;
  transition: all .4s;
}
.verdict.v-green { background:rgba(22,101,52,.25); border-color:#16a34a; }
.verdict.v-amber { background:rgba(202,138,4,.16); border-color:#ca8a04; }
.verdict.v-red { background:rgba(153,27,27,.22); border-color:#dc2626; }
.verdict.v-teal { background:rgba(13,148,136,.16); border-color:#0d9488; }

/* صفوف التدعيم */
.hire-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 4px; border-bottom:1px dashed rgba(125,164,140,.25);
  font-size:13px;
}
.hire-row:last-child { border-bottom:none; }
.hire-n {
  min-width:34px; height:26px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#dc2626,#991b1b); color:#fff; font-weight:800; font-size:13px;
}

/* أرقام كبيرة */
.big-num { font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-1px; }

/* وسيلة الإيضاح */
.legend-dot { width:13px; height:17px; border-radius:2.5px; display:inline-block; vertical-align:-3px; }

/* تلميح الدور */
.floor-row .tip {
  position:absolute; z-index:30; bottom:calc(100% + 8px); right:0;
  width:250px; background:#08291d; border:1px solid #e3b65b; border-radius:10px;
  padding:10px 12px; font-size:12px; line-height:1.7; color:#e8f0ea;
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:all .25s; box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.floor-row:hover .tip { opacity:1; transform:translateY(0); }

/* شريط علوي */
.topbar { background:rgba(7,21,16,.85); backdrop-filter:blur(8px); border-bottom:1px solid rgba(43,90,65,.6); }

/* استجابة */
@media (max-width:1023px){
  .floor-tag { min-width:110px; max-width:120px; }
  .floor-tag .fname { font-size:11px; }
  .win { width:15px; height:21px; }
}

/* طباعة */
@media print {
  body { background:#fff; color:#111; }
  .topbar, .crane, .stars { display:none; }
}

/* ============ v3.1: الجولة العقارية ============ */

/* ترويسة محطة */
.station {
  display:flex; align-items:center; gap:14px; margin-bottom:8px;
}
.station .st-num {
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,#e3b65b,#c9963f);
  color:#08291d; font-weight:900; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(201,162,75,.35);
}
.station h2 { margin:0; font-size:clamp(20px,3vw,27px); font-weight:800; color:#fff; }
.station .st-sub { font-size:13px; color:#7da48c; margin-top:2px; }

/* ظهور تدريجي */
.rvl { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.rvl.on { opacity:1; transform:translateY(0); }

/* بطاقة وثيقة (أوراق البناء) */
.doc-card {
  background:rgba(16,41,29,.75); border:1px solid #2b5a41; border-radius:14px;
  padding:16px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s;
}
.doc-card:hover { border-color:#e3b65b; transform:translateY(-3px); }
.doc-card .stamp {
  position:absolute; left:10px; top:10px; font-size:10px; font-weight:800;
  color:#e3b65b; border:1.5px solid #e3b65b; border-radius:6px; padding:2px 7px;
  transform:rotate(-8deg); opacity:.85; letter-spacing:.5px;
}
.doc-card .d-ico {
  width:40px; height:40px; border-radius:10px; background:rgba(201,162,75,.12);
  color:#f1cd79; display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:10px;
}
.doc-card .d-t { font-weight:800; font-size:14px; color:#fff; }
.doc-card .d-as { font-size:11.5px; color:#e3b65b; font-weight:700; margin:2px 0 6px; }
.doc-card .d-d { font-size:12px; color:#a9c7b5; line-height:1.7; }

/* بطاقة فحص (منهجية) */
.test-card {
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(13,40,24,.6); border:1px solid #2b5a41; border-radius:12px; padding:12px 14px;
}
.test-card i { color:#f1cd79; margin-top:3px; }
.test-card .t-n { font-weight:800; font-size:13px; color:#fff; }
.test-card .t-ref { font-size:10.5px; color:#e3b65b; }
.test-card .t-d { font-size:12px; color:#a9c7b5; line-height:1.65; margin-top:2px; }

/* خطوات الحساب */
.step-flow { display:flex; flex-direction:column; gap:0; }
.step-item { display:flex; gap:14px; position:relative; padding-bottom:22px; }
.step-item::before {
  content:''; position:absolute; right:17px; top:38px; bottom:0; width:2px;
  background:linear-gradient(180deg,#e3b65b55,transparent);
}
.step-item:last-child::before { display:none; }
.step-item .sp-n {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:#0e3b2a; border:2px solid #e3b65b; color:#f1cd79;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px;
}

/* الأبراج المجاورة (skyline) */
.skyline {
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,3vw,34px);
  padding:20px 8px 0; position:relative; min-height:330px;
}
.sky-t { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; flex:1; max-width:130px; }
.sky-b {
  width:100%; max-width:86px; border-radius:8px 8px 0 0; position:relative;
  background:
    repeating-linear-gradient(180deg, rgba(217,185,110,.28) 0 5px, transparent 5px 13px),
    repeating-linear-gradient(90deg, rgba(217,185,110,.22) 0 5px, transparent 5px 14px),
    linear-gradient(180deg,#1d4831,#122c1e);
  border:1px solid #33604a; border-bottom:none;
  height:0; transition:height 1.2s cubic-bezier(.2,.8,.25,1);
  box-shadow:0 -4px 24px rgba(0,0,0,.35);
}
.sky-b.us {
  background:
    repeating-linear-gradient(180deg, rgba(201,162,75,.5) 0 5px, transparent 5px 13px),
    repeating-linear-gradient(90deg, rgba(201,162,75,.4) 0 5px, transparent 5px 14px),
    linear-gradient(180deg,#3d2f10,#241c09);
  border-color:#e3b65b;
  box-shadow:0 0 26px rgba(201,162,75,.35);
}
.sky-b .rpe-tag {
  position:absolute; top:-30px; right:50%; transform:translateX(50%);
  font-weight:900; font-size:15px; color:#fff; white-space:nowrap;
}
.sky-b.us .rpe-tag { color:#f1cd79; }
.sky-name { font-size:11.5px; font-weight:700; color:#cfe3d6; margin-top:8px; line-height:1.5; }
.sky-meta { font-size:10px; color:#7da48c; }
.sky-ground { height:8px; background:linear-gradient(90deg,transparent,#3b5c48 10%,#3b5c48 90%,transparent); border-radius:99px; margin-top:0; }

/* الحكم جيد/غير جيد */
.gj-card { border-radius:12px; padding:12px 14px; font-size:12.5px; line-height:1.7; }
.gj-good { background:rgba(22,101,52,.18); border:1px solid #16a34a66; }
.gj-bad { background:rgba(153,27,27,.16); border:1px solid #dc262666; }
.gj-card b { display:block; font-size:13px; margin-bottom:2px; }
.gj-good b { color:#4ade80; } .gj-bad b { color:#f87171; }

/* قاعدة صيانة */
.rule-card {
  background:rgba(16,41,29,.7); border:1px solid #2b5a41; border-radius:14px; padding:15px;
  transition:border-color .25s;
}
.rule-card:hover { border-color:#e3b65b; }
.rule-card .r-if { font-size:12px; color:#a9c7b5; }
.rule-card .r-th { font-size:12.5px; font-weight:800; color:#fca5a5; margin:4px 0; }
.rule-card .r-do {
  font-size:12.5px; font-weight:800; color:#5eead4;
  background:rgba(13,148,136,.12); border:1px solid #0d948855; border-radius:8px; padding:6px 10px; margin-top:8px;
}

/* شريط لماذا نثق */
.trust-strip {
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.trust-strip .tr {
  font-size:11.5px; font-weight:700; color:#cfe3d6;
  border:1px solid #2b5a41; border-radius:99px; padding:6px 14px; background:rgba(13,40,24,.6);
}
.trust-strip .tr i { color:#e3b65b; margin-left:5px; }

/* روابط المحطات في الشريط */
.st-link { font-size:11.5px; font-weight:700; color:#a9c7b5; padding:5px 10px; border-radius:8px; transition:all .2s; white-space:nowrap; }
.st-link:hover, .st-link.act { color:#f1cd79; background:rgba(201,162,75,.1); }

/* ============ النسخة المؤسسية: أعمدة مقارنة بسيطة بدل الأبراج ============ */
.sky-b.plainbar {
  background: linear-gradient(180deg, #218a62, #115b3e);
  border:1px solid #2ba375; border-bottom:none;
}
.sky-b.plainbar.us {
  background: linear-gradient(180deg, #f1cd79, #c9963f);
  border-color:#e3b65b;
  box-shadow:0 0 26px rgba(201,162,75,.35);
}

/* ===== v3.3: تدفق الأنشطة (نموذج الأعمال) ===== */
.flow-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flow-step{background:#08291d66;border:1px solid #1a735066;color:#d7e5dc;font-size:11px;padding:4px 9px;border-radius:99px;white-space:nowrap}
.flow-arrow{color:#e3b65b88;font-size:9px}

/* ============ الهيكل التنظيمي ومناطق الاختناق (st-org) ============ */
.org-line { width:2px; height:22px; margin:0 auto; background:linear-gradient(180deg,#e3b65b88,#2a4a36); }
.org-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .org-groups { grid-template-columns:1fr; } }
.org-group {
  background:rgba(10,26,17,.72); border:1px solid #234534; border-radius:16px;
  padding:12px; position:relative;
}
.org-group::before {
  content:''; position:absolute; top:-22px; right:50%; width:2px; height:22px;
  background:linear-gradient(180deg,#e3b65b66,#234534);
}
.org-ghead { font-size:12.5px; color:#e8f0ea; margin-bottom:10px; padding-bottom:8px; border-bottom:1px dashed #234534; }
.org-ghead span { display:block; font-size:10.5px; color:#7da48c; font-weight:400; margin-top:2px; }
.org-cell {
  border:1px solid; border-radius:12px; padding:9px 10px; margin-bottom:8px;
  position:relative; transition:background .5s, border-color .5s;
}
.org-cell:last-child { margin-bottom:0; }
.org-cname { font-size:12px; font-weight:700; color:#e8f0ea; margin-bottom:3px; }
.org-cmeta { font-size:10.5px; color:#7da48c; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.org-util { font-size:12px; }
.org-bar { height:5px; border-radius:99px; background:#0c1f15; overflow:hidden; margin-top:6px; }
.org-bar > div { height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.3,1), background .5s; }
.org-hire {
  position:absolute; top:-7px; left:8px; font-size:9.5px; font-weight:800;
  background:linear-gradient(135deg,#dc2626,#991b1b); color:#fff;
  border:1px solid #fecaca55; border-radius:99px; padding:1px 7px;
  box-shadow:0 0 8px rgba(220,38,38,.5);
}
.org-range {
  width:100%; appearance:none; -webkit-appearance:none; height:8px; border-radius:99px;
  background:linear-gradient(90deg,#16a34a33,#ca8a0433 50%,#dc262633); outline:none; cursor:pointer;
  border:1px solid #234534;
}
.org-range::-webkit-slider-thumb {
  appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,#f1cd79,#e3b65b); border:2px solid #08291d;
  box-shadow:0 0 8px rgba(201,162,75,.6); cursor:grab;
}
.org-range::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,#f1cd79,#e3b65b); border:2px solid #08291d;
  box-shadow:0 0 8px rgba(201,162,75,.6); cursor:grab;
}