/* ===== Theme tokens (default: dark) ===== */
:root{
  --bg:#0b1220;
  --panel: rgba(15,23,42,.62);
  --panel2: rgba(2,6,23,.35);
  --stroke: rgba(255,255,255,.08);

  --text:#e5e7eb;
  --muted:#9ca3af;

  --gold:#c7a24b;
  --gold2:#e3c46a;

  --shadow: 0 18px 60px rgba(0,0,0,.45);

  --canvasDot: rgba(255,255,255,.055);
  --link: rgba(148,163,184,.55);
  --modalBg: rgba(0,0,0,.55);

  --cardFill: #ffffff;
  --cardInner: #f8fafc;
  --cardText: #0b1220;
  --cardMeta: rgba(11,18,32,.75);
}

/* ===== Light Theme ===== */
html[data-theme="light"]{
  --bg:#f6f7f9;
  --panel: rgba(255,255,255,.92);
  --panel2: rgba(255,255,255,.75);
  --stroke: rgba(0,0,0,.08);

  --text:#111827;
  --muted:#6b7280;

  --shadow: 0 18px 60px rgba(0,0,0,.12);

  --canvasDot: rgba(17,24,39,.08);
  --link: rgba(100,116,139,.70);
  --modalBg: rgba(17,24,39,.45);

  --cardFill: #ffffff;
  --cardInner: #f9fafb;
  --cardText: #111827;
  --cardMeta: rgba(17,24,39,.70);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 70% 0%, rgba(199,162,75,.14), transparent 55%),
    radial-gradient(900px 600px at 15% 25%, rgba(59,130,246,.10), transparent 55%),
    var(--bg);
}

/* =========================
   Topbar
   ========================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  position:sticky;
  top:0;
  z-index:10;
  background: var(--panel);
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(10px);
}

.brand{display:flex; align-items:center; gap:12px}
.brandText{display:flex; flex-direction:column}

.logo{
  width:42px; height:42px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(199,162,75,.28), rgba(255,255,255,.06));
  border:1px solid rgba(199,162,75,.35);
  font-weight:900;
}

.title{font-size:18px; font-weight:950}
.subtitle{font-size:12px; color:var(--muted); margin-top:3px}

.actions{display:flex; align-items:center; gap:10px}

.adminBtn{
  text-decoration:none;
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  cursor:pointer;
}
.adminBtn:hover{background:rgba(255,255,255,.09)}

/* =========================
   Global Site Additions (Navbar + Logo)
   ========================= */

/* Logo in header (FREE / no box) */
:root{
  --logoFilter: invert(1) brightness(1.1);
  --logoMaxW: 180px;
  --logoH: 46px;
}

html[data-theme="light"]{
  --logoFilter: none;
}

.brandLogo{
  height: var(--logoH);
  width: auto;                 
  max-width: var(--logoMaxW);  
  object-fit: contain;
  background: transparent;     
  border: 0;                   
  border-radius: 0;            
  box-shadow: none;            
  filter: var(--logoFilter);   
}

/* Top navigation */
.topnav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:6px 8px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}

.navLink{
  padding:9px 12px;
  border-radius:999px;
  text-decoration:none;
  color: var(--muted);
  border:1px solid transparent;
  font-weight:900;
  font-size:13px;
}
.navLink:hover{
  color:var(--text);
  border-color:var(--stroke);
  background: rgba(255,255,255,.05);
}
.navLink.active{
  color:#111827;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  border-color: rgba(0,0,0,.08);
}

@media (max-width: 980px){
  .topbar{flex-wrap:wrap}
  .topnav{width:100%; justify-content:center}
  .actions{width:100%; justify-content:flex-start}
}

/* =========================
   Workspace (Tree Page)
   ========================= */
.workspace{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;
  padding:14px;
  align-items:start;
}

.drawer{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:sticky;
  top:74px;
  height: calc(100vh - 96px);
}

.drawerHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-bottom:1px solid var(--stroke);
  background: var(--panel2);
}
.drawerTitle{font-weight:950}
.drawerSub{font-size:12px; color:var(--muted); margin-top:3px}
.drawerBody{padding:12px}
.muted{color:var(--muted)}

.kvs{
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.kvs > div{
  padding:10px 12px;
  border-bottom:1px solid var(--stroke);
}
.kvs > div:last-child{border-bottom:0}

.canvasCard{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--stroke);
  background: var(--panel2);
}
.toolgroup{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.search{
  width:280px;
  max-width: 55vw;
  border-radius:14px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
.search::placeholder{color:rgba(229,231,235,.55)}
html[data-theme="light"] .search::placeholder{color:rgba(17,24,39,.45)}

.primaryBtn{
  border:0;
  border-radius:14px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
  color:#111827;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
}
.primaryBtn:hover{filter: brightness(1.05)}

.ghostBtn{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
}
.ghostBtn:hover{background:rgba(255,255,255,.08)}

.iconBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  font-size:18px;
}
.iconBtn:hover{background:rgba(255,255,255,.08)}

.treeCanvas{
  height: calc(100vh - 160px);
  min-height: 520px;
  position:relative;
  background:
    radial-gradient(circle at 1px 1px, var(--canvasDot) 1px, transparent 0) 0 0/18px 18px,
    radial-gradient(900px 520px at 75% 25%, rgba(199,162,75,.08), transparent 55%),
    radial-gradient(900px 520px at 20% 65%, rgba(59,130,246,.06), transparent 55%),
    rgba(2,6,23,.10);
}

html[data-theme="light"] .treeCanvas{
  background:
    radial-gradient(circle at 1px 1px, var(--canvasDot) 1px, transparent 0) 0 0/18px 18px,
    radial-gradient(900px 520px at 75% 25%, rgba(199,162,75,.08), transparent 55%),
    radial-gradient(900px 520px at 20% 65%, rgba(59,130,246,.06), transparent 55%),
    rgba(255,255,255,.70);
}

#tree svg{width:100%; height:100%}

.link{
  fill:none;
  stroke: var(--link);
  stroke-width: 2;
}
.nodeCard{cursor:pointer; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.nodeName{font-size:14px; font-weight:950; fill: var(--cardText)}
.nodeMeta{font-size:11px; fill: var(--cardMeta)}

.nodeSelected{
  filter: drop-shadow(0 0 14px rgba(227,196,106,.55)) drop-shadow(0 18px 24px rgba(0,0,0,.35));
}

.footnote{
  padding:10px 12px;
  border-top:1px solid var(--stroke);
  color:rgba(229,231,235,.70);
  font-size:12px;
  background: rgba(2,6,23,.12);
}
html[data-theme="light"] .footnote{
  color:rgba(17,24,39,.65);
  background: rgba(255,255,255,.65);
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background: var(--modalBg);
  display:grid;
  place-items:center;
  padding:16px;
  z-index:50;
}
.modalContent{
  width:min(720px, 100%);
  background: var(--panel);
  color:var(--text);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
  position:relative;
}
.close{
  position:absolute;
  left:12px; top:10px;
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-size:18px;
}
.hidden{display:none}

/* Admin pages */
.page{ max-width: 1100px; margin: 14px auto; padding: 0 14px 18px; }
.card{ background: var(--panel); border: 1px solid var(--stroke); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.cardHeader{ padding: 14px; border-bottom: 1px solid var(--stroke); background: var(--panel2); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cardBody{padding:14px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 8px; border-bottom:1px solid var(--stroke); text-align:right; font-size:14px}
.table th{color:var(--muted); font-weight:900}
.small{font-size:12px; color:var(--muted)}
.rowActions{display:flex; gap:8px; flex-wrap:wrap}

.input, select, textarea{ width:100%; padding:10px 12px; border-radius:14px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); color: var(--text); outline:none; }
label{display:block; margin:10px 0 6px; font-weight:900}
.preview{ width:120px; height:120px; border-radius:18px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); object-fit: cover; }
.btnRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

/* Pages Layout */
.pageWrap{ max-width:1100px; margin: 14px auto; padding: 0 14px 26px; }
.hero{ background: linear-gradient(135deg, rgba(199,162,75,.12), rgba(59,130,246,.08)); border:1px solid var(--stroke); border-radius:18px; box-shadow: var(--shadow); padding:16px; margin-top:14px; }
.heroTitle{ margin:0; font-size:26px; font-weight:950; }
.heroSub{ margin:6px 0 0; color:var(--muted); line-height:1.8; }
.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; margin-top:14px; }
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }
.panel{ background: var(--panel); border:1px solid var(--stroke); border-radius:18px; box-shadow: var(--shadow); overflow:hidden; }
.panelHeader{ padding:14px; border-bottom:1px solid var(--stroke); background: var(--panel2); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.panelTitle{ margin:0; font-weight:950; font-size:16px; }
.panelBody{padding:14px}
.p{ margin:0; color:var(--text); line-height:1.95; }
.p + .p{margin-top:10px}
.badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background: rgba(255,255,255,.05); color: var(--text); font-weight:900; font-size:12px; }

/* Honor cards */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
@media (max-width: 980px){ .cards{grid-template-columns:1fr} }
.hCard{ background: rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:18px; padding:12px; }
.hName{font-weight:950; margin:0 0 6px}
.hMeta{margin:0; color:var(--muted); font-size:12px; line-height:1.7}

/* Support form */
.formRow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 980px){ .formRow{grid-template-columns:1fr} }
.helpText{ color:var(--muted); font-size:12px; line-height:1.7; margin-top:8px; }

/* PDF Frame */
.pdfFrame{ margin-top:14px; padding:14px; border-radius:20px; border:1px solid rgba(199,162,75,.28); background: linear-gradient(135deg, rgba(199,162,75,.08), rgba(255,255,255,.03)); box-shadow: var(--shadow); position:relative; overflow:hidden; }
.pdfFrame::before{ content:""; position:absolute; inset:-60px; background: radial-gradient(circle at 20% 20%, rgba(199,162,75,.18), transparent 55%), radial-gradient(circle at 80% 30%, rgba(59,130,246,.10), transparent 60%), radial-gradient(circle at 40% 80%, rgba(227,196,106,.10), transparent 60%); pointer-events:none; }
.pdfInner{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--stroke); background: rgba(0,0,0,.12); }
.pdfInner iframe{ width:100%; height: min(78vh, 920px); border:0; display:block; background: var(--bg); }

/* Responsive */
@media (max-width: 1100px){
  .workspace{grid-template-columns:1fr}
  .drawer{position:relative; top:auto; height:auto}
  .treeCanvas{height:640px}
  #tree svg{height:100%}
}

.workspace{ grid-template-columns: 1fr !important; }
.canvasCard{ min-width: 0; }
#tree svg{ width: 100% !important; height: 100% !important; }

.drawer{ position: fixed !important; top: 74px !important; right: 14px !important; width: 360px; max-width: calc(100vw - 28px); height: calc(100vh - 96px) !important; z-index: 30 !important; transform: translateX(calc(100% + 20px)); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
.drawer.isOpen{ transform: translateX(0); opacity: 1; pointer-events: auto; }
@media (max-width: 980px){ .drawer{ width: min(420px, calc(100vw - 28px)); top: 66px !important; height: calc(100vh - 86px) !important; } }

.brand .brandLogo{ display: none !important; height: 48px; width: auto; max-width: 260px; object-fit: contain; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html:not([data-theme="light"]) .brand .logoDark{ display: block !important; }
html[data-theme="light"] .brand .logoLight{ display: block !important; }

#drawer { max-height: calc(100vh - 80px); overflow: hidden; }
#details { max-height: calc(100vh - 140px); overflow-y: auto; padding-inline-end: 8px; scroll-behavior: smooth; }
#details::-webkit-scrollbar { width: 8px; }
#details::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); border-radius: 999px; }
#details::-webkit-scrollbar-thumb { background: rgba(15, 118, 110, 0.65); border-radius: 999px; }
#details::-webkit-scrollbar-thumb:hover { background: rgba(15, 118, 110, 0.9); }



/* =================================================================================
   🏆 ROYAL FAMILY TREE OVERRIDES (SAFE CSS INJECTION)
   التعديلات الملكية للشجرة - (لا تمس كود الـ HTML او الـ JS نهائياً)
   ================================================================================= */

/* 1. الخيوط الرابطة بين العائلة (الخشب والذهب) */
.link {
  stroke: #8B5E3C !important; /* لون الخشب الفاتح في الوضع العادي */
  stroke-width: 4px !important; /* خيط سميك وواضح جداً */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.85 !important;
  transition: all 0.4s ease !important;
}

html.dark .link, 
[data-theme="dark"] .link {
  stroke: #E5B869 !important; /* لون ذهبي في الوضع الداكن */
  opacity: 0.7 !important;
  filter: drop-shadow(0 0 4px rgba(229, 184, 105, 0.6)) !important; /* تأثير توهج للخيط */
}

/* 2. تصميم البرواز الخشبي للصور (Node Portrait) */
.node-portrait {
  border: 6px solid #4a2f1d !important; /* برواز خشب داكن وسميك جداً */
  border-radius: 8px !important; /* زوايا خفيفة لتبدو كلوحة حقيقية */
  box-shadow: 0 0 0 2px #C7A24B, inset 0 0 0 1px #C7A24B, 0 10px 18px rgba(0,0,0,0.15) !important; /* حلية ذهبية تحيط بالخشب */
  background: #F8F8F6 !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

/* تلوين الهالة الذهبية/الخضراء حول البرواز الخشبي حسب الجنس */
.node-portrait.male {
  box-shadow: 0 0 0 2px #005A2B, inset 0 0 0 1px #005A2B, 0 10px 18px rgba(0,0,0,0.15) !important;
}
.node-portrait.female {
  box-shadow: 0 0 0 2px #E5B869, inset 0 0 0 1px #E5B869, 0 10px 18px rgba(0,0,0,0.15) !important;
}

html.dark .node-portrait, 
[data-theme="dark"] .node-portrait {
  border-color: #3b2314 !important; /* خشب أغمق قليلاً للدارك مود */
}

html.dark .node-portrait.male, 
[data-theme="dark"] .node-portrait.male {
  box-shadow: 0 0 0 2px #005A2B, inset 0 0 0 1px #005A2B, 0 12px 25px rgba(0,0,0,0.5) !important;
}

html.dark .node-portrait.female, 
[data-theme="dark"] .node-portrait.female {
  box-shadow: 0 0 0 2px #E5B869, inset 0 0 0 1px #E5B869, 0 12px 25px rgba(0,0,0,0.5) !important;
}

/* تأثير الحركة للبرواز */
.person-node-group:hover .node-portrait {
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow: 0 0 0 3px #C7A24B, inset 0 0 0 1px #C7A24B, 0 15px 30px rgba(0,0,0,0.25) !important;
  z-index: 50 !important;
}
html.dark .person-node-group:hover .node-portrait {
  box-shadow: 0 0 0 3px #C7A24B, inset 0 0 0 1px #C7A24B, 0 15px 35px rgba(0,0,0,0.7) !important;
}

/* 3. تصميم يافطة الاسم الذهبية (Name Box) */
.name-box {
  background: linear-gradient(to bottom, #ffffff, #f4f1e8) !important; /* تدرج لوني يعطي لمعة */
  border: 2px solid #C7A24B !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin-top: -18px !important; /* تداخل مع البرواز الخشبي لتبدو معلقة عليه */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
  position: relative !important;
  z-index: 20 !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

html.dark .name-box, 
[data-theme="dark"] .name-box {
  background: linear-gradient(to bottom, #1f1f1f, #0A0A0A) !important;
  border-color: #E5B869 !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.6) !important;
}

.person-node-group:hover .name-box {
  transform: translateY(-6px) scale(1.04) !important;
}

/* تنسيق خط الاسم */
.node-label-text {
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  color: #005A2B !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

html.dark .node-label-text, 
[data-theme="dark"] .node-label-text {
  color: #FAFAFA !important;
}

/* 4. تصميم التبويبة الجانبية (Drawer & Details) بشكل ملكي فاخر */
#drawer {
  background: linear-gradient(180deg, #F8F8F6 0%, #EFEFEF 100%) !important;
  border-left: 3px solid #C7A24B !important; /* خط ذهبي فاصل */
  box-shadow: -15px 0 40px rgba(0,0,0,0.1) !important;
  border-radius: 24px 0 0 24px !important; /* انحناء للداخل فقط */
}

html.dark #drawer, 
[data-theme="dark"] #drawer {
  background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%) !important;
  border-left: 3px solid #E5B869 !important;
  box-shadow: -15px 0 50px rgba(0,0,0,0.8) !important;
}

/* تصميم صورة الشخص داخل التبويبة */
#details img {
  border: 6px solid #4a2f1d !important; /* برواز خشب */
  box-shadow: 0 0 0 2px #C7A24B, 0 10px 20px rgba(0,0,0,0.2) !important;
  border-radius: 12px !important;
  width: 140px !important;
  height: 140px !important;
  margin: 0 auto 20px auto !important;
  display: block !important;
  object-fit: cover !important;
}

html.dark #details img {
  box-shadow: 0 0 0 2px #E5B869, 0 12px 25px rgba(0,0,0,0.6) !important;
}

/* تصميم اسم الشخص داخل التبويبة */
#details h2 {
  color: #005A2B !important;
  font-family: 'Aref Ruqaa', serif !important;
  font-size: 32px !important;
  text-align: center !important;
  margin-bottom: 15px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

html.dark #details h2, 
[data-theme="dark"] #details h2 {
  color: #E5B869 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* تصميم النصوص العادية داخل التبويبة */
#details p {
  color: #333 !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed rgba(199,162,75,0.4) !important; /* فاصل منقط ذهبي */
  line-height: 1.6 !important;
}

html.dark #details p, 
[data-theme="dark"] #details p {
  color: #DDD !important;
  border-bottom: 1px dashed rgba(229,184,105,0.2) !important;
}

/* تلوين العناوين الجانبية (الميلاد، الوفاة، الخ) */
#details span.font-bold {
  color: #005A2B !important;
  font-weight: 900 !important;
  display: inline-block !important;
  min-width: 60px !important;
}

html.dark #details span.font-bold, 
[data-theme="dark"] #details span.font-bold {
  color: #E5B869 !important;
}

/* تنسيق شريط التمرير داخل التبويبة الجانبية لتكون ذهبية */
#details::-webkit-scrollbar { width: 6px !important; }
#details::-webkit-scrollbar-track { background: transparent !important; }
#details::-webkit-scrollbar-thumb { background: #C7A24B !important; border-radius: 8px !important; }


.node-portrait {
  width: 132px !important;
  height: 132px !important;
  min-width: 132px !important;
  min-height: 132px !important;
  max-width: 132px !important;
  max-height: 132px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

/* الصورة تظهر منتظمة بشكل رائع (Cover مع التركيز على أعلى الصورة للوجوه) */
.node-portrait img,
#details img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important; /* لضمان عدم قص الرأس */
  padding: 0 !important; /* إزالة المسافات لتملأ البرواز */
  margin: 0 !important;
  transform: none !important;
  background-color: transparent !important;
}

/* منع hover القديم من تكبير الصورة نفسها وقصها */
.person-node-group:hover .node-portrait img {
  transform: none !important;
}

/* ===== 2) ألوان الأزرار ===== */

/* الوضع الداكن: زر ذهبي ونص أسود */
html.dark .primaryBtn,
html.dark button.primaryBtn,
html.dark a.primaryBtn,
html.dark .navLink.active,
html.dark .adminBtn.active,
html.dark #resetView,
html.dark #toggleDetails,
html.dark #fit.active,
html.dark #focusMode.active,
html.dark .bg-primary,
html.dark button.bg-primary,
html.dark a.bg-primary,
[data-theme="dark"] .primaryBtn,
[data-theme="dark"] button.primaryBtn,
[data-theme="dark"] a.primaryBtn,
[data-theme="dark"] .bg-primary,
[data-theme="dark"] button.bg-primary,
[data-theme="dark"] a.bg-primary,
[data-theme="dark"] #resetView,
[data-theme="dark"] #toggleDetails {
  background: #E5B869 !important;
  background-color:  #E5B869 !important;
  background-image: none !important;
  color: #050505 !important;
  border-color: #E5B869 !important;
}

/* ضمان تلوين الأيقونات داخل الزر باللون الأسود في الوضع الداكن */
html.dark #resetView *,
html.dark #toggleDetails *,
html.dark .bg-primary *,
[data-theme="dark"] #resetView *,
[data-theme="dark"] #toggleDetails *,
[data-theme="dark"] .bg-primary * {
  color: #050505 !important;
}

/* الوضع الفاتح: زر أخضر ملكي ونص أبيض */
html[data-theme="light"] .primaryBtn,
html[data-theme="light"] button.primaryBtn,
html[data-theme="light"] a.primaryBtn,
html[data-theme="light"] .bg-primary,
html[data-theme="light"] button.bg-primary,
html[data-theme="light"] a.bg-primary,
html[data-theme="light"] #resetView,
html[data-theme="light"] #toggleDetails,
html:not(.dark) .primaryBtn,
html:not(.dark) button.primaryBtn,
html:not(.dark) a.primaryBtn,
html:not(.dark) .bg-primary,
html:not(.dark) button.bg-primary,
html:not(.dark) a.bg-primary,
html:not(.dark) #resetView,
html:not(.dark) #toggleDetails {
  background: #005A2B !important;
  background-color: #005A2B !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #005A2B !important;
}

/* ضمان تلوين الأيقونات باللون الأبيض في الوضع الفاتح */
html:not(.dark) #resetView *,
html:not(.dark) #toggleDetails *,
html:not(.dark) .bg-primary *,
html[data-theme="light"] #resetView *,
html[data-theme="light"] #toggleDetails *,
html[data-theme="light"] .bg-primary * {
  color: #FFFFFF !important;
}

/* أزرار التحكم الثانوية (تكبير/تصغير) في الداكن */
html.dark .ghostBtn,
html.dark .iconBtn,
html.dark #zoomIn,
html.dark #zoomOut,
html.dark #fit,
html.dark #focusMode,
[data-theme="dark"] #zoomIn,
[data-theme="dark"] #zoomOut,
[data-theme="dark"] #fit,
[data-theme="dark"] #focusMode {
  color: #E5B869 !important;
  border-color: rgba(229,184,105,.45) !important;
  background: rgba(229,184,105,.08) !important;
}

html.dark #zoomIn *,
html.dark #zoomOut *,
html.dark #fit *,
html.dark #focusMode * {
    color: #E5B869 !important;
}

/* عند hover في الداكن */
html.dark #zoomIn:hover,
html.dark #zoomOut:hover,
html.dark #fit:hover,
html.dark #focusMode:hover {
  background: #E5B869 !important;
  color: #050505 !important;
  border-color: #E5B869 !important;
}
html.dark #zoomIn:hover *,
html.dark #zoomOut:hover *,
html.dark #fit:hover *,
html.dark #focusMode:hover * {
  color: #050505 !important;
}


/* ===== FINAL FIX (BADGES + FULL DRAWER) ===== */

/* ذكر */
#details .male,
#details span[title="ذكر"] {
  background: rgba(0,90,43,.12) !important;
  color: #005A2B !important;
  border: 1px solid rgba(0,90,43,.25) !important;
}

html.dark #details .male,
html.dark #details span[title="ذكر"] {
  background: #E5B869 !important;
  color: #050505 !important;
  border: 1px solid #E5B869 !important;
}

/* متوفى */
#details .deceased,
#details span[title="متوفى"] {
  background: rgba(120,120,120,.15) !important;
  color: #444 !important;
  border: 1px solid rgba(120,120,120,.3) !important;
}

html.dark #details .deceased,
html.dark #details span[title="متوفى"] {
  background: rgba(229,184,105,.15) !important;
  color: #E5B869 !important;
  border: 1px solid rgba(229,184,105,.35) !important;
}

/* إصلاح التبويبة */
#drawer {
  height: calc(100vh - 80px) !important;
  overflow: hidden !important;
}

#details {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: 100px !important;
}

#details::after {
  content: "";
  display: block;
  height: 80px;
}
/* =====================================================
   ✅ FINAL FIX (BADGES + FULL SCROLL DETAILS)
   ===================================================== */

/* =========================
   🎯 1. BADGES (ذكر / متوفى)
   ========================= */

#details .badge,
#details span[title="ذكر"],
#details span[title="متوفى"] {
  background: #E5B869 !important;
  color: #050505 !important;
  border: 1px solid #E5B869 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

/* Hover */
#details .badge:hover {
  background: #d4a94f !important;
  color: #000 !important;
}

/* =========================
   🎯 2. إصلاح Scroll التبويبة
   ========================= */

/* التبويبة نفسها */
#drawer {
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* المحتوى الداخلي */
#details {
  flex: 1 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;

  padding-bottom: 120px !important;
  scroll-behavior: smooth !important;
}

/* يمنع قطع آخر عنصر */
#details::after {
  content: "";
  display: block;
  height: 100px;
}

/* Scrollbar أنعم */
#details::-webkit-scrollbar {
  width: 6px;
}
#details::-webkit-scrollbar-thumb {
  background: #C7A24B;
  border-radius: 999px;
}

/* =========================
   🎯 3. منع اللون الأبيض نهائيًا
   ========================= */

#details .badge,
#details span {
  background-color: #E5B869 !important;
  color: #050505 !important;
}

/* =========================
   🎯 4. Fix إضافي للصورة (اختياري لكن مهم)
   ========================= */

#details img {
  width: 140px !important;
  height: 140px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
}



/* =================================================================================
   ✅ FIX DETAILS DECEASED DIAGONAL RIBBON
   يعيد الشريط الأسود القطري على صورة تبويبة التفاصيل عند وجود بادج "متوفى"
   ================================================================================= */

/* الحالة العامة: لو تفاصيل الشخص تحتوي على متوفى */
#details:has(span[title="متوفى"]) > div:first-child,
#details:has(span[aria-label="متوفى"]) > div:first-child,
#details:has(.deceased) > div:first-child,
#details:has(.is-deceased) > div:first-child,
#details:has(.person-status) > div:first-child {
  position: relative !important;
}

/* اجعل أي حاوية مباشرة للصورة قابلة لاستقبال الشريط */
#details:has(span[title="متوفى"]) div:has(> img),
#details:has(span[aria-label="متوفى"]) div:has(> img),
#details:has(.deceased) div:has(> img),
#details:has(.is-deceased) div:has(> img),
#details:has(.person-status) div:has(> img) {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* الشريط القطري الأسود مثل الموجود في الشجرة */
#details:has(span[title="متوفى"]) div:has(> img)::after,
#details:has(span[aria-label="متوفى"]) div:has(> img)::after,
#details:has(.deceased) div:has(> img)::after,
#details:has(.is-deceased) div:has(> img)::after,
#details:has(.person-status) div:has(> img)::after {
  content: "" !important;
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;

  width: 54px !important;
  height: 54px !important;

  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.92) 50%,
    transparent 51%,
    transparent 100%
  ) !important;

  z-index: 50 !important;
  pointer-events: none !important;
}

/* لو الصورة نفسها داخل أول كارت بدون wrapper واضح */
#details:has(span[title="متوفى"]) > div:first-child::after,
#details:has(span[aria-label="متوفى"]) > div:first-child::after,
#details:has(.deceased) > div:first-child::after,
#details:has(.is-deceased) > div:first-child::after,
#details:has(.person-status) > div:first-child::after {
  content: "" !important;
  position: absolute !important;

  top: 14px !important;
  right: 14px !important;

  width: 54px !important;
  height: 54px !important;

  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.92) 50%,
    transparent 51%,
    transparent 100%
  ) !important;

  border-top-right-radius: 14px !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

/* لا تجعل صورة التفاصيل تقص الشريط */
#details img {
  position: relative !important;
  z-index: 1 !important;
}

/* ضمان لون بادج متوفى نفسه لا يبقى أبيض */
#details span[title="متوفى"],
#details span[aria-label="متوفى"],
#details .deceased,
#details .is-deceased,
#details .person-status {
  background: #E5B869 !important;
  color: #050505 !important;
  border: 1px solid #E5B869 !important;
}

/* التبويبة تقرأ للنهاية */
#drawer {
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#details,
.drawerBody {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: 130px !important;
  scroll-padding-bottom: 130px !important;
}

#details::before {
  display: none !important;
}

#details::after {
  content: "" !important;
  display: block !important;
  height: 120px !important;
}

/* ===== Search UX improvements ===== */
.search-clear-btn{
  position:absolute;
  inset-inline-end:12px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:rgba(17,24,39,.08);
  color:rgba(17,24,39,.65);
  font-size:22px;
  line-height:28px;
  font-weight:800;
  cursor:pointer;
  display:none;
  z-index:25;
}
html.dark .search-clear-btn,
html[data-theme="dark"] .search-clear-btn{
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
}
.search-clear-btn.is-visible{display:flex;align-items:center;justify-content:center;}
.search-clear-btn:hover{background:rgba(199,162,75,.22);color:#c7a24b;}

.search-suggestions,
.search-empty-message{
  position:absolute;
  inset-inline-start:0;
  inset-inline-end:0;
  top:calc(100% + 8px);
  z-index:80;
  border-radius:18px;
  border:1px solid rgba(199,162,75,.28);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  overflow:hidden;
  backdrop-filter:blur(18px);
}
.search-suggestions{
  background:rgba(255,255,255,.96);
  max-height:310px;
  overflow-y:auto;
  padding:6px;
}
html.dark .search-suggestions,
html[data-theme="dark"] .search-suggestions{
  background:rgba(17,24,39,.96);
  border-color:rgba(227,196,106,.24);
}
.search-suggestion-item{
  width:100%;
  border:0;
  background:transparent;
  color:#111827;
  text-align:right;
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:800;
}
html.dark .search-suggestion-item,
html[data-theme="dark"] .search-suggestion-item{color:#f8f1df;}
.search-suggestion-item:hover,
.search-suggestion-item.is-active{
  background:rgba(199,162,75,.15);
  color:#9a741d;
}
html.dark .search-suggestion-item:hover,
html[data-theme="dark"] .search-suggestion-item:hover,
html.dark .search-suggestion-item.is-active,
html[data-theme="dark"] .search-suggestion-item.is-active{
  color:#e3c46a;
  background:rgba(227,196,106,.12);
}
.search-suggestion-count{
  opacity:.58;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.search-empty-message{
  background:rgba(255,255,255,.97);
  color:#7f1d1d;
  padding:13px 16px;
  font-weight:800;
  text-align:center;
}
html.dark .search-empty-message,
html[data-theme="dark"] .search-empty-message{
  background:rgba(17,24,39,.97);
  color:#fecaca;
}
/* لا نعيد تعريف .hidden هنا حتى لا نكسر Tailwind responsive classes مثل hidden md:flex في الهيدر. */

@media (max-width:700px){
  .search-suggestions,
  .search-empty-message{
    position:fixed;
    inset-inline-start:14px;
    inset-inline-end:14px;
    top:150px;
    max-height:45vh;
  }
}


/* ===== HTML overlay tree nodes for mobile Safari stability ===== */
.tree-html-stage { position: absolute; inset: 0; overflow: hidden; }
.tree-html-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}
.tree-html-node {
  position: absolute;
  pointer-events: auto;
  transform-origin: center top;
  will-change: transform, opacity;
}
.tree-html-node.nodeSelected .name-box {
  border-color: #E5B869 !important;
  box-shadow: 0 0 0 3px rgba(229,184,105,.18), 0 12px 28px rgba(229,184,105,.26) !important;
}
html.dark .tree-html-node.nodeSelected .name-box {
  box-shadow: 0 0 0 3px rgba(229,184,105,.15), 0 0 22px rgba(229,184,105,.24) !important;
}
.tree-html-node.nodeFlash .node-portrait,
.tree-html-node.nodeFlash .name-box {
  animation: treeNodeFlash 1.2s ease;
}
@keyframes treeNodeFlash {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(229,184,105,0); }
  25% { transform: scale(1.03); box-shadow: 0 0 0 5px rgba(229,184,105,.18); }
  100% { transform: scale(1); box-shadow: inherit; }
}