/* ============================================================
   شجرة العائلة التفاعلية — التنسيق العام
   لوحة الألوان: خلفية رَق دافئة + لهجة جذع شجرة بنّية + ذهبي/أزرق/أخضر للأجيال
   ============================================================ */

:root{
  --brand:         #2E5C8A;   /* لون العلامة التجارية القابل للتخصيص من admin/settings.php */
  --panel:         #FFFFFF;   /* خلفية البطاقات/الخانات — تتغيّر في الوضع الداكن */
  --bg:            #F4EFE3;   /* رَق دافئ */
  --bg-deep:       #ECE3D2;
  --ink:           #2B2118;   /* بني غامق للنصوص */
  --ink-soft:      #6B5E4E;
  --line-branch:   #A9886B;   /* لون فروع الشجرة */

  --gold:          #BD7B2C;  --gold-bg:  #F8EAD6;  --gold-ink: #6E4314;
  --blue:          #3E6B8C;  --blue-bg:  #E3ECF2;  --blue-ink: #1F3F54;
  --green:         #4F8261;  --green-bg: #E6F0E9;  --green-ink: #2A4F37;
  --teal:          #2E8A93;  --teal-bg:  #DFF0F1;  --teal-ink: #185158;
  --rose:          #8B5A8C;  --rose-bg:  #F0E5F1;  --rose-ink: #573659;

  --card-w: 168px;
  --card-h: 64px;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(43,33,24,0.14);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* صفحة الشجرة فقط تحتاج منع تمرير الصفحة نفسها (لأنها تُحرَّك بالسحب/التكبير داخلياً) */
body.tree-page, body.embed-mode{ height:100%; overflow:hidden; }

/* ---------------- الشريط العلوي ---------------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:30;
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 20px;
  background:var(--panel);
  border-bottom:1px solid rgba(169,136,107,0.3);
}
.brand{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.public-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.public-nav .kinship-link.active{ background:var(--brand); color:#fff; }

.tree-toolbar{
  position:fixed; top:64px; right:0; left:0; z-index:25; min-height:56px;
  display:flex; align-items:center; gap:16px; padding:8px 20px; flex-wrap:wrap;
  background:var(--toolbar-bg, var(--panel));
  border-bottom:1px solid var(--toolbar-border, rgba(169,136,107,0.25));
}
.tree-toolbar .search-wrap{ flex:1; max-width:420px; }
.tree-toolbar #btn-toggle-photos{ margin-inline-start:auto; flex-shrink:0; }
@media (max-width:720px){
  .tree-toolbar #btn-toggle-photos{ order:2; margin-inline-start:0; }
}
.brand-mark{ font-size:calc(var(--logo-size, 34px) * 0.65); color:var(--gold); line-height:1; }
.brand h1{ font-size:18px; font-weight:700; margin:0; }

.search-wrap{ flex:1; max-width:420px; position:relative; }
#search-input{
  width:100%; padding:10px 16px; border-radius:999px;
  border:1px solid var(--search-border-color, rgba(169,136,107,0.4)); background:var(--panel);
  font-family:inherit; font-size:14px; color:var(--ink);
  outline:none; transition:box-shadow .2s;
}
#search-input:focus{ box-shadow:0 0 0 3px var(--search-glow-shadow, rgba(200,147,43,0.25)); }
.search-count{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--ink-soft);
}

.search-suggestions{
  position:absolute; top:calc(100% + 8px); right:0; left:0; z-index:60;
  background:var(--panel); border:1px solid rgba(169,136,107,0.3); border-radius:14px;
  box-shadow:0 12px 30px rgba(43,33,24,0.18);
  max-height:320px; overflow-y:auto; display:none;
}
.search-suggestions.open{ display:block; }
.suggestion-item{
  padding:10px 16px; cursor:pointer; font-size:13.5px; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.suggestion-item:hover, .suggestion-item.active{ background:var(--bg); }
.suggestion-item .gen-tag{ font-size:11px; color:var(--ink-soft); flex-shrink:0; }
.suggestion-empty{ padding:12px 16px; font-size:13px; color:var(--ink-soft); text-align:center; }

.legend{ display:flex; gap:14px; font-size:13px; color:var(--toolbar-text, var(--ink-soft)); flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-gold{ background:var(--gold); }
.dot-blue{ background:var(--blue); }
.dot-green{ background:var(--green); }
.dot-teal{ background:var(--teal); }
.dot-rose{ background:var(--rose); }

.kinship-link{
  white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--brand);
  background:rgba(var(--brand-rgb), 0.14); padding:8px 16px; border-radius:999px; text-decoration:none;
}
.kinship-link:hover{ opacity:.85; }

/* ---------------- منطقة الشجرة ---------------- */
#tree-viewport{
  position:absolute; inset:120px 0 0 0;
  overflow:hidden;
  cursor:grab;
  background:
    radial-gradient(circle at 50% 0%, var(--bg) 0%, var(--bg-deep) 100%);
}
#tree-viewport.dragging{ cursor:grabbing; }

#links-layer{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.branch-path{
  fill:none;
  stroke:var(--line-branch);
  stroke-width:2.2px;
  stroke-linecap:round;
  opacity:0.75;
}

/* اسم كل عائلة فوق جذرها (يظهر فقط عند وجود أكثر من عائلة واحدة بالشجرة) */
.family-label{
  font-family:'Almarai', sans-serif;
  font-size:16px;
  font-weight:700;
  fill:var(--ink);
  opacity:0.85;
}

/* خط الزواج الرابط بين شجرتي عائلتين مختلفتين */
.marriage-bridge{
  fill:none;
  stroke:var(--rose);
  stroke-width:2.4px;
  stroke-dasharray:3 6;
  stroke-linecap:round;
  opacity:0.85;
}
.marriage-bridge.marriage-bridge-inactive{ opacity:0.4; }
.marriage-bridge-icon{
  font-size:18px;
  text-anchor:middle;
  dominant-baseline:middle;
  pointer-events:none;
}

#nodes-layer{ position:absolute; inset:0; width:100%; height:100%; }
#nodes-zoom-group{ position:absolute; left:0; top:0; transform-origin:0 0; }

.tree-status{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:15px; color:var(--ink-soft);
}
.tree-status.hidden{ display:none; }

/* ---------------- بطاقة الفرد ---------------- */
.person-card{
  position:absolute;
  width:var(--card-w); min-height:var(--card-h);
  transform:translate(-50%, 0); /* نص حول النقطة x */
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px 14px;
  padding-top:28px; /* مساحة إضافية أعلى البطاقة تحت الصورة البارزة */
  text-align:center;
  cursor:pointer;
  user-select:none;
  border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.person-card:hover{ transform:translate(-50%, -3px); box-shadow:0 10px 22px rgba(43,33,24,0.22); }

/* ---------------- صورة العضو: دائرة بارزة خارج البطاقة من الأعلى (نمط بطاقات الشجرة العائلية)، بديل تلقائي لو ما فيه صورة ---------------- */
.card-avatar{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:46px; height:46px; border-radius:50%;
  object-fit:cover; background:var(--panel);
  border:3px solid var(--panel); /* حلقة بيضاء تفصلها بصرياً عن خطوط الشجرة خلفها */
  box-shadow:0 0 0 2px #BFD8EE, 0 3px 8px rgba(43,33,24,0.25); /* حلقة زرقاء هادئة افتراضية (ذكر) */
}
/* الشجرة تُخفي/تُظهر الصور عبر كلاس على العنصر الجذري — انعكاس فوري بدون إعادة رسم الشجرة */
html.hide-avatars .card-avatar{ display:none; }
html.hide-avatars .person-card{ padding-top:10px; }
.person-card.is-female .card-avatar{ box-shadow:0 0 0 2px #F4A6C6, 0 3px 8px rgba(43,33,24,0.25); }
.person-card.card-is-deceased .card-avatar{ filter:grayscale(55%); opacity:.85; }

.person-card.gen-gold {  background:var(--gold-bg);  border-color:var(--gold);  color:var(--gold-ink); }
.person-card.gen-blue {  background:var(--blue-bg);  border-color:var(--blue);  color:var(--blue-ink); }
.person-card.gen-green{  background:var(--green-bg); border-color:var(--green); color:var(--green-ink); }
.person-card.gen-teal {  background:var(--teal-bg);  border-color:var(--teal);  color:var(--teal-ink); }
.person-card.gen-rose {  background:var(--rose-bg);  border-color:var(--rose);  color:var(--rose-ink); }

/* تمييز الإناث: حلقة وردية ناعمة حول البطاقة (خارج الإطار الأصلي)، بلا أي تغيير على خلفية/حدود لون الجيل */
.person-card.is-female{
  box-shadow: 0 0 0 2px #F4A6C6, 0 0 0 5px rgba(244,166,198,0.35), var(--shadow);
}
.female-icon{ font-size:12px; margin-inline-start:2px; }

/* معاينة طلب "إضافة" لسه ما اعتُمد — يظهر فقط لمن أرسله (مشرف/مدير)، بإطار متقطع وشارة تنبيه، بدون تأثير على الشجرة الفعلية */
.person-card.is-pending{
  border-style:dashed !important;
  opacity:.72;
}
.pending-badge{
  position:absolute; top:-11px; left:6px;
  background:#B8860B; color:#fff; font-size:9.5px; font-weight:700;
  padding:2px 8px; border-radius:999px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,0.2);
  z-index:2;
}
html[data-theme="dark"] .pending-badge{ background:#D4A017; color:#1A1400; }

/* تمييز "متزوج من خارج العائلة": إطار ثنائي ناعم ووقور، بلون جيله الأصلي (نفس border-color المضبوط مسبقاً
   عبر gen-gold/gen-blue/...، لا نلمسه هنا — فقط نوسّع عرض الإطار ونجعله ثنائي الخط بدل العادي) */
.person-card.married-outside{
  border-width:4px;
  border-style:double;
}
/* بطاقة المعاينة المنبثقة لا تملك لون جيل افتراضياً، فنحدّده عبر متغيّر CSS تضبطه script.js لكل شخص */
.hover-popup.married-outside{
  border-width:4px;
  border-style:double;
  border-color: var(--mo-border-color, var(--brand));
}

/* أبناء الأمهات المتزوجات من خارج العائلة (للإدارة فقط) — border منقَّط يحلّ محل إطار الجيل الأصلي */
.person-card.child-of-outside{
  border-style: dashed;
  border-width: 2px;
}
.hover-popup.child-of-outside{
  border: 2px dashed var(--mo-border-color, var(--brand));
}

.deceased-icon{ font-size:12px; opacity:.85; }

.person-card .name-main{ font-size:14px; font-weight:700; line-height:1.3; }
.person-card .name-sub{ font-size:11px; opacity:.75; margin-top:2px; }
.deceased-prayer{ font-size:11px; color:var(--ink-soft); font-weight:500; }

.person-card.highlighted{
  border-color:#D64545;
  box-shadow:0 0 0 4px rgba(214,69,69,0.22), var(--shadow);
  z-index:5;
  animation:searchPulse 1.3s ease-in-out infinite;
}
@keyframes searchPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(214,69,69,0.22), 0 0 10px rgba(214,69,69,0.35); }
  50%{ box-shadow:0 0 0 8px rgba(214,69,69,0.12), 0 0 22px rgba(214,69,69,0.7); }
}

/* ---------------- وهج مسار القرابة (Kinship Visual Pathway) ---------------- */
.person-card.highlight-endpoint{
  border-color:#FF3B5C !important;
  box-shadow:0 0 0 5px rgba(255,59,92,0.22), 0 0 16px rgba(255,59,92,0.5);
  animation:kinshipPulse 1.4s ease-in-out infinite;
  z-index:10;
}
@keyframes kinshipPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(255,59,92,0.22), 0 0 12px rgba(255,59,92,0.4); }
  50%{ box-shadow:0 0 0 8px rgba(255,59,92,0.14), 0 0 26px rgba(255,59,92,0.8); }
}

.kinship-link-path{
  fill:none;
  stroke:#FF3B5C;
  stroke-width:4px;
  stroke-linecap:round;
  stroke-dasharray:10 7;
  filter:drop-shadow(0 0 4px rgba(255,59,92,0.85)) drop-shadow(0 0 10px rgba(255,59,92,0.55));
  animation:kinshipFlow 1s linear infinite;
}
@keyframes kinshipFlow{ to{ stroke-dashoffset:-34; } }

/* ---------------- أزرار التحكم العائمة ---------------- */
.controls{
  position:fixed; bottom:24px; left:24px; z-index:25;
  display:flex; flex-direction:column; gap:8px;
}
.ctrl-btn{
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(169,136,107,0.4);
  background:var(--panel); color:var(--ink);
  font-size:20px; font-family:inherit; cursor:pointer;
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.ctrl-btn:active{ transform:scale(.94); }
.ctrl-btn-wide{ width:auto; padding:0 16px; font-size:14px; font-weight:600; gap:6px; }
.ctrl-icon svg.lucide{ width:18px; height:18px; stroke-width:2; display:block; }

/* ---------------- بطاقة المعاينة السريعة (Popup) ---------------- */
.hover-popup{
  position:fixed; z-index:40;
  width:240px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 14px 36px rgba(43,33,24,0.28);
  padding:16px;
  animation:popupIn .15s ease-out;
}

@keyframes popupIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ——— الإطار المزدوج للمتزوج من خارج العائلة — لا يُلمَس ——— */
.hover-popup.married-outside{
  border-width:4px;
  border-style:double;
  border-color: var(--mo-border-color, var(--brand));
}
.hover-popup.child-of-outside{
  border: 2px dashed var(--mo-border-color, var(--brand));
}
/* ——————————————————————————————————————————————————————— */

.popup-close{
  position:absolute; top:10px; left:12px;
  width:28px; height:28px; border-radius:50%;
  border:none; background:rgba(120,100,80,0.12); color:var(--ink);
  font-size:18px; cursor:pointer;
}
.popup-header{ display:flex; align-items:center; gap:12px; }
.popup-avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
/* توهّج الإناث — محفوظ — لا يُلمَس */
.popup-is-female .popup-avatar{ box-shadow:0 0 0 3px #F4A6C6; }

.popup-fullname{ font-size:var(--popup-name-size, 15px); font-weight:700; margin:0; line-height:1.4; }
html[data-theme="dark"] .popup-fullname{ color:#ffffff; }

.popup-dates{
  margin-top:10px; display:flex; flex-direction:column; gap:4px;
  font-size:12px; color:var(--ink-soft);
}
.popup-dates span{ display:block; }

/* قسم الزوجات/الزوج */
.popup-wives{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.popup-wives-label{
  font-size:11px; color:var(--ink-soft); margin-bottom:4px;
}
.popup-wife-link{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  font-family:inherit; font-size:12.5px; font-weight:600; text-decoration:none;
  background:var(--bg); color:var(--ink);
  transition:background .15s;
}
/* زوجة: وردي ناعم (نفس ألوان الإناث في الموقع) */
.popup-wife-link.link-wife{ background:#FBEAF0; color:#9B4D6B; }
.popup-wife-link.link-wife:hover{ background:#F4D0DE; color:#9B4D6B; }
/* زوج: سماوي ناعم */
.popup-wife-link.link-husband{ background:var(--blue-bg); color:var(--blue-ink); }
.popup-wife-link.link-husband:hover{ background:rgba(var(--blue-rgb), 0.18); color:var(--blue-ink); }
/* الافتراضي (بلا كلاس) */
.popup-wife-link:hover{ background:#E5DCC8; color:var(--ink); }
html[data-theme="dark"] .popup-wife-link:hover{ background:#1E1B14; }
.popup-wife-status{ color:var(--ink-soft); font-size:11px; }

/* صف يجمع رابط الزوجة/الزوج مع زر "🎯 اذهب لبطاقتها بالشجرة" بشريحة واحدة متصلة (لا عنصرين منفصلين) */
.popup-wife-row{
  display:flex; align-items:stretch;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.popup-wife-row-wife{ border-color:#E08FAE; }
.popup-wife-row-husband{ border-color:var(--blue); }
.popup-wife-row .popup-wife-link{ flex:1; border-radius:0; }
.popup-wife-jump{
  flex-shrink:0; width:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:0;
  border-inline-start:1px solid rgba(0,0,0,.1);
  font-size:14px; cursor:pointer;
  font-family:inherit; transition:background .15s;
}
.popup-wife-row-wife .popup-wife-jump{ background:#FBEAF0; }
.popup-wife-row-wife .popup-wife-jump:hover{ background:#F4D0DE; }
.popup-wife-row-husband .popup-wife-jump{ background:var(--blue-bg); }
.popup-wife-row-husband .popup-wife-jump:hover{ background:rgba(var(--blue-rgb), 0.18); }
html[data-theme="dark"] .popup-wife-jump{ border-inline-start-color:rgba(255,255,255,.12); }

/* الأزرار — عمودية بالكامل */
.popup-actions{
  display:flex; flex-direction:column; gap:7px; margin-top:14px;
}
.popup-btn svg.lucide, .popup-export-branch svg.lucide{ width:15px; height:15px; stroke-width:2; flex-shrink:0; }
.popup-btn{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:10px;
  font-family:inherit; font-size:12.5px; font-weight:600; text-decoration:none;
  cursor:pointer; transition:background .15s, border-color .15s; width:100%;
  background:var(--popup-gen-bg, var(--bg)); color:var(--ink); border:1px solid var(--popup-gen-border, var(--border));
}
.popup-btn:hover{ background:var(--popup-btn-hover-bg, var(--popup-gen-hover-bg, #E5DCC8)); color:var(--popup-btn-hover-text, var(--popup-gen-hover-text, var(--ink))); border-color:var(--popup-btn-hover-border, var(--popup-gen-hover-bg, var(--border))); }
html[data-theme="dark"] .popup-btn:hover{ background:var(--popup-btn-hover-bg, var(--popup-gen-hover-bg, #1E1B14)); color:var(--popup-btn-hover-text, var(--popup-gen-hover-text, var(--ink))); border-color:var(--popup-btn-hover-border, var(--popup-gen-hover-bg, var(--border))); }

.popup-export-branch{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:9px 14px; border-radius:10px;
  border:1px solid var(--popup-gen-border, var(--border)); background:var(--popup-gen-bg, var(--bg)); color:var(--ink);
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.popup-export-branch:hover{ background:var(--popup-btn-hover-bg, var(--popup-gen-hover-bg, #E5DCC8)); color:var(--popup-btn-hover-text, var(--popup-gen-hover-text, var(--ink))); border-color:var(--popup-btn-hover-border, var(--popup-gen-hover-bg, var(--border))); }
html[data-theme="dark"] .popup-export-branch:hover{ background:var(--popup-btn-hover-bg, var(--popup-gen-hover-bg, #1E1B14)); color:var(--popup-btn-hover-text, var(--popup-gen-hover-text, var(--ink))); border-color:var(--popup-btn-hover-border, var(--popup-gen-hover-bg, var(--border))); }

.hover-popup[hidden]{ display:none; }

/* ---------------- وضع التضمين (Embed) داخل صفحات أخرى كـ kinship.php ---------------- */
body.embed-mode .topbar{ display:none; }
body.embed-mode .tree-toolbar{ display:none; }
body.embed-mode #tree-viewport{ inset:0; }

/* ---------------- استجابة للشاشات الصغيرة ---------------- */
@media (max-width: 720px){
  .topbar{ height:auto; flex-wrap:wrap; padding:10px 14px; gap:8px; }
  .public-nav{ width:100%; justify-content:center; }
  .tree-toolbar{ top:104px; height:auto; flex-wrap:wrap; padding:10px 14px; }
  .tree-toolbar .legend{ order:3; width:100%; justify-content:center; }
  #tree-viewport{ inset:170px 0 0 0; }
  :root{ --card-w:128px; --card-h:54px; }
  .person-card{ padding:6px 10px; padding-top:22px; }
  html.hide-avatars .person-card{ padding-top:8px; }
  .card-avatar{ width:36px; height:36px; top:-16px; }
  .person-card .name-main{ font-size:12.5px; }
  .person-card .name-sub{ font-size:10px; }
  .controls{
    bottom:14px; left:14px; flex-direction:row; flex-wrap:wrap; gap:8px; max-width:calc(100vw - 28px);
  }
  .ctrl-btn-wide{ width:44px; height:44px; padding:0; }
  .ctrl-label{ display:none; }
  .ctrl-icon{ font-size:18px; }
  .ctrl-icon svg.lucide{ width:18px; height:18px; }
}

/* ============================================================
   الوضع الداكن — يُفعَّل عبر <html data-theme="dark">
   ============================================================ */
html[data-theme="dark"]{
  --panel:        #232830;
  --bg:           #1B1F27;
  --bg-deep:      #11141A;
  --ink:          #EDEAE3;
  --ink-soft:     #9CA3AF;
  --border:       rgba(255,255,255,0.12);

  --gold-bg:  #3A2C18;  --blue-bg:  #1B2E3A;  --green-bg: #1C2F23;  --teal-bg: #14323A;  --rose-bg: #2E2030;

  /* نصوص الأجيال: الحدود/الأيقونات تبقى ملوّنة، لكن النص الداخلي يصبح فاتحاً دائماً لضمان التباين */
  --gold-ink:  #F8F9FA;
  --blue-ink:  #F8F9FA;
  --green-ink: #F8F9FA;
  --teal-ink:  #F8F9FA;
  --rose-ink:  #F8F9FA;
}
/* النصوص الفرعية (صلة القرابة، الوظيفة...) برمادي ناعم مقروء بدل اللون الموروث الغامق */
html[data-theme="dark"] .name-sub,
html[data-theme="dark"] .popup-relation,
html[data-theme="dark"] .legend,
html[data-theme="dark"] .gen-tag{ color:#b3b3b3 !important; opacity:1; }
/* أسماء البطاقات نفسها: أبيض واضح فوق أي خلفية جيل غامقة */
html[data-theme="dark"] .person-card .name-main{ color:#ffffff; }
html[data-theme="dark"] body{ background:var(--bg); }
html[data-theme="dark"] .tree-toolbar{
  background:var(--toolbar-bg, var(--panel));
  border-bottom-color:var(--toolbar-border, rgba(255,255,255,0.08));
}
html[data-theme="dark"] .ctrl-btn{
  background:rgba(30,27,20,0.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,0.1);
}
html[data-theme="dark"] .topbar{ background:var(--panel); border-bottom-color:rgba(255,255,255,0.1); }
html[data-theme="dark"] #search-input,
html[data-theme="dark"] .auth-card input{ background:var(--panel); color:var(--ink); border-color:rgba(255,255,255,0.15); }
html[data-theme="dark"] .person-card{ box-shadow:0 6px 16px rgba(0,0,0,0.4); }
html[data-theme="dark"] .hover-popup,
html[data-theme="dark"] .search-suggestions{ box-shadow:0 14px 36px rgba(0,0,0,0.55); }
html[data-theme="dark"] .ctrl-btn,
html[data-theme="dark"] .kinship-link{ background:var(--panel); color:var(--ink); border-color:rgba(255,255,255,0.12); }
html[data-theme="dark"] .kinship-link{ background:rgba(var(--brand-rgb), 0.22); color:#fff; }

#btn-theme-toggle{ border:none; }

/* ============================================================
   الهيدر الزجاجي العائم + الفوتر — تصميم فاخر حديث (لوحة زمردية دافئة)
   ============================================================ */
:root{
  --hdr-accent: #1F6F5C;        /* زمردي عميق هادئ — لون التمييز الجديد للهيدر */
  --hdr-accent-soft: #E4F1ED;   /* خلفية فاتحة شفافة للزمردي */
  --hdr-surface: rgba(255,255,255,0.7);
  --hdr-surface-strong: rgba(255,255,255,0.92);
  --hdr-border: rgba(31,111,92,0.14);
  --hdr-text-soft: rgba(43,33,24,0.62);
}
html[data-theme="dark"]{
  --hdr-accent: #4FD8B8;
  --hdr-accent-soft: rgba(79,216,184,0.12);
  --hdr-surface: rgba(20,24,22,0.7);
  --hdr-surface-strong: rgba(24,28,26,0.94);
  --hdr-border: rgba(79,216,184,0.16);
  --hdr-text-soft: rgba(244,239,227,0.55);
}

.glass-header{
  position:sticky; top:0; z-index:50;
  height:64px;
  padding:0 28px;
  display:flex; align-items:center;
  background:var(--hdr-surface);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--hdr-border);
  box-sizing:border-box;
}
.glass-header-inner{
  display:flex; align-items:center; gap:10px; max-width:1280px; margin:0 auto; width:100%; height:100%;
}

.glass-brand{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);
  flex-shrink:0;
}
.glass-logo-wrap{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:var(--hdr-accent-soft); overflow:hidden;
}
.glass-brand-text{
  font-size:24px; font-weight:800; white-space:nowrap; letter-spacing:-0.2px;
}

.glass-divider{ width:1px; height:24px; background:var(--hdr-border); flex-shrink:0; margin:0 4px; }

.glass-nav{
  display:flex; gap:2px; flex-shrink:0; margin-right:auto;
  background:rgba(120,120,120,0.07); padding:4px; border-radius:14px;
}
html[data-theme="dark"] .glass-nav{ background:rgba(255,255,255,0.05); }
.glass-nav-link{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; text-decoration:none; color:var(--ink); opacity:.65;
  padding:8px 16px; border-radius:10px; white-space:nowrap;
  transition:background .18s ease, opacity .18s ease, color .18s ease;
}
.glass-nav-link i{ font-size:16px; }
.glass-nav-link svg.lucide{ width:16px; height:16px; stroke-width:2; flex-shrink:0; }
.glass-icon-btn svg.lucide{ width:16px; height:16px; stroke-width:2; }
.back-link-btn{
  opacity:1 !important; background:var(--menu-bg-base, rgba(120,120,120,0.07));
  border:1px solid var(--menu-border, transparent);
}
.back-link-btn:hover{ opacity:1; }
.glass-nav-link:hover{ background:var(--hdr-surface-strong); opacity:1; }
.glass-nav-link.active{
  background:var(--hdr-accent); color:#fff; opacity:1;
  box-shadow:0 4px 12px rgba(31,111,92,0.28);
}
html[data-theme="dark"] .glass-nav-link.active{ color:#0E1411; box-shadow:0 4px 14px rgba(79,216,184,0.25); }

.glass-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.glass-icon-btn{
  flex-shrink:0; width:36px; height:36px; border-radius:12px; border:1px solid var(--hdr-border);
  background:var(--hdr-surface-strong); cursor:pointer; font-size:14px; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease, border-color .15s ease;
}
.glass-icon-btn:hover{ transform:translateY(-1px); border-color:var(--hdr-accent); }
.glass-icon-btn:active{ transform:translateY(0) scale(.96); }
.glass-icon-btn.active{ background:var(--hdr-accent); border-color:var(--hdr-accent); color:#fff; }

.glass-search-trigger-wrap{ position:relative; }
body.tree-page .glass-search-trigger-wrap{ display:none; }

.glass-search-flyout{
  position:absolute; top:calc(100% + 10px); left:0; z-index:60;
  width:270px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.glass-search-flyout.open{ opacity:1; visibility:visible; transform:translateY(0); }
.glass-search-input{
  width:100%; padding:10px 16px; border-radius:14px; border:1px solid var(--search-border-color, var(--hdr-border));
  background:var(--panel); font-family:inherit; font-size:13px; color:var(--ink);
  box-shadow:0 12px 28px rgba(20,30,26,0.16); box-sizing:border-box;
}
.glass-search-input:focus{ outline:none; border-color:var(--hdr-accent); box-shadow:0 0 0 3px var(--search-glow-shadow, rgba(200,147,43,0.25)); }
.glass-search-suggestions{
  margin-top:8px; background:var(--panel); border-radius:14px;
  box-shadow:0 16px 36px rgba(20,30,26,0.2); border:1px solid var(--hdr-border);
  display:none; max-height:280px; overflow-y:auto;
}
.glass-search-suggestions.open{ display:block; }
.glass-search-item{
  display:flex; justify-content:space-between; gap:8px; padding:10px 16px; text-decoration:none;
  color:var(--ink); font-size:12.5px; border-bottom:1px solid var(--hdr-border);
}
.glass-search-item:last-child{ border-bottom:none; }
.glass-search-item:hover{ background:var(--hdr-accent-soft); }
.glass-search-item-rel{ color:var(--hdr-text-soft); font-size:11px; }
.glass-search-empty{ padding:14px 16px; font-size:12px; color:var(--hdr-text-soft); text-align:center; }

@media (min-width:721px){
  .show-on-mobile{ display:none !important; }
}
@media (max-width:880px){
  .glass-header{ height:auto; min-height:64px; padding:10px 16px; }
  .glass-header-inner{ flex-wrap:wrap; row-gap:8px; height:auto; }
  .glass-brand{ padding-left:0; }
  .hide-on-mobile{ display:none !important; }
}
@media (max-width:720px){
  .glass-nav{
    display:none; position:absolute; top:100%; right:16px; left:16px; margin-top:8px;
    flex-direction:column; gap:4px; padding:10px; z-index:60;
    border:1px solid var(--hdr-border); border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
  }
  .glass-nav.glass-nav-open{
    display:flex;
    background:var(--panel) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  .glass-nav-link{ justify-content:flex-start; padding:12px 14px; }
  .glass-header-inner{ position:relative; }
}

/* ---------------- الفوتر — متناسق مع لوحة الزمردي الجديدة ---------------- */
.site-footer{
  background:#10221C; color:rgba(228,241,237,0.65);
  padding:24px 20px; text-align:center; font-size:12px; line-height:1.85; margin-top:40px;
  border-top:1px solid rgba(79,216,184,0.18);
}
html[data-theme="dark"] .site-footer{ background:#0A1512; }
.site-footer a{ color:#4FD8B8; }