:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --border:#e5e7eb;
  --border2:#eef2f7;
  --shadow: 0 18px 45px rgba(15,23,42,.06);
  --shadow2: 0 10px 25px rgba(15,23,42,.05);
  --brand:#2563eb;
  --brand2:#1d4ed8;
  --ok:#16a34a;
  --bad:#dc2626;
  --warn:#b45309;
  --chip:#f1f5f9;
  --chip2:#eff6ff;
}

*{ box-sizing:border-box; font-family: system-ui,-apple-system,Segoe UI,Roboto,Tahoma,Arial; font-weight:800 !important; }
html,body{ height:100%; }
body{
  margin:0;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 40%, #ffffff 100%);
  color:var(--text);
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 22px;
}

.brand{
  display:flex; align-items:center; gap:10px;
}
.brand .logo{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg,#eff6ff,#ffffff);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
.brand .title{
  display:flex; flex-direction:column; line-height:1.2;
}
.brand .title b{ font-size:14px; }
.brand .title span{ font-size:12px; color:var(--muted); font-weight:800 !important; }

.nav{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.nav a{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--text);
}
.nav a:hover{
  background:#f8fafc;
  border-color:var(--border);
  text-decoration:none;
}

.container{
  width:100%;
  margin:0 auto;
  padding:22px 22px 40px;
  max-width:none; /* مهم: لا نحشر بالوسط */
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

@media(min-width:1100px){
  .grid.two{ grid-template-columns: 1.15fr .85fr; }
  .grid.three{ grid-template-columns: 1fr 1fr 1fr; }
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}

.card h2,.card h3{
  margin:0 0 12px 0;
  font-size:14px;
}

.hr{ height:1px; background:var(--border2); margin:14px 0; }

.muted{ color:var(--muted); font-size:12px; font-weight:800 !important; }
.small{ font-size:12px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--chip);
  color:var(--text);
  font-size:12px;
}
.badge.blue{ background:var(--chip2); border-color:#dbeafe; color:#1e40af; }
.badge.ok{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.badge.bad{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

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

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}
.field label{ font-size:12px; color:var(--muted); }
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#fff;
  color:var(--text);
}
textarea{ min-height:160px; resize:vertical; }
input:focus,select:focus,textarea:focus{
  border-color:#c7d2fe;
  box-shadow:0 0 0 4px rgba(99,102,241,.10);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.btn:hover{ border-color:#d1d5db; background:#f8fafc; }
.btn.primary{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff;
  border-color:#1d4ed8;
}
.btn.primary:hover{ filter:brightness(.98); }
.btn.danger{
  background:#fff;
  color:#b91c1c;
  border-color:#fecaca;
}
.btn.danger:hover{ background:#fff5f5; }

.alert{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#f8fafc;
  color:var(--text);
  white-space:pre-wrap;
}
.alert.ok{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.alert.bad{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.alert.warn{ background:#fffbeb; border-color:#fde68a; color:#7c2d12; }

.tableWrap{
  width:100%;
  overflow:auto;          /* مهم: يعطي راحة عند كثرة الأعمدة */
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}
table{
  width:100%;
  min-width: 980px;       /* يمنع انكماش الجدول ويدفع للتمرير عند الحاجة */
  border-collapse:separate;
  border-spacing:0;
}
th,td{
  padding:12px 10px;
  border-bottom:1px solid var(--border2);
  text-align:right;
  vertical-align:middle;
  white-space:nowrap;
}
thead th{
  position:sticky;
  top:0;
  background: #fbfdff;
  border-bottom:1px solid var(--border);
  z-index:3;
  font-size:12px;
  color:#334155;
}
tbody tr:hover td{ background:#fafcff; }

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

.kbd{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:10px;
  padding:2px 8px;
  font-weight:800 !important;
  font-size:12px;
}

.loginShell{
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.loginCard{
  width: min(520px, 100%);
  padding:18px;
}
.loginCard .head{
  display:flex; gap:12px; align-items:center; margin-bottom:12px;
}
.loginCard .head .logo{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(135deg,#eff6ff,#ffffff);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
.loginCard h1{ margin:0; font-size:16px; }
.loginCard p{ margin:3px 0 0 0; color:var(--muted); font-size:12px; }

.footerLinks{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

CSScd /opt/family_table || exit 1
mkdir -p static

cat > static/app.css <<'CSS'
:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --border:#e5e7eb;
  --border2:#eef2f7;
  --shadow: 0 18px 45px rgba(15,23,42,.06);
  --shadow2: 0 10px 25px rgba(15,23,42,.05);
  --brand:#2563eb;
  --brand2:#1d4ed8;
  --ok:#16a34a;
  --bad:#dc2626;
  --warn:#b45309;
  --chip:#f1f5f9;
  --chip2:#eff6ff;
}

*{ box-sizing:border-box; font-family: system-ui,-apple-system,Segoe UI,Roboto,Tahoma,Arial; font-weight:800 !important; }
html,body{ height:100%; }
body{
  margin:0;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 40%, #ffffff 100%);
  color:var(--text);
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 22px;
}

.brand{
  display:flex; align-items:center; gap:10px;
}
.brand .logo{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg,#eff6ff,#ffffff);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
.brand .title{
  display:flex; flex-direction:column; line-height:1.2;
}
.brand .title b{ font-size:14px; }
.brand .title span{ font-size:12px; color:var(--muted); font-weight:800 !important; }

.nav{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.nav a{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--text);
}
.nav a:hover{
  background:#f8fafc;
  border-color:var(--border);
  text-decoration:none;
}

.container{
  width:100%;
  margin:0 auto;
  padding:22px 22px 40px;
  max-width:none; /* مهم: لا نحشر بالوسط */
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}

@media(min-width:1100px){
  .grid.two{ grid-template-columns: 1.15fr .85fr; }
  .grid.three{ grid-template-columns: 1fr 1fr 1fr; }
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}

.card h2,.card h3{
  margin:0 0 12px 0;
  font-size:14px;
}

.hr{ height:1px; background:var(--border2); margin:14px 0; }

.muted{ color:var(--muted); font-size:12px; font-weight:800 !important; }
.small{ font-size:12px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--chip);
  color:var(--text);
  font-size:12px;
}
.badge.blue{ background:var(--chip2); border-color:#dbeafe; color:#1e40af; }
.badge.ok{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.badge.bad{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

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

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}
.field label{ font-size:12px; color:var(--muted); }
input,select,textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  outline:none;
  background:#fff;
  color:var(--text);
}
textarea{ min-height:160px; resize:vertical; }
input:focus,select:focus,textarea:focus{
  border-color:#c7d2fe;
  box-shadow:0 0 0 4px rgba(99,102,241,.10);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#ffffff;
  color:var(--text);
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.btn:hover{ border-color:#d1d5db; background:#f8fafc; }
.btn.primary{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff;
  border-color:#1d4ed8;
}
.btn.primary:hover{ filter:brightness(.98); }
.btn.danger{
  background:#fff;
  color:#b91c1c;
  border-color:#fecaca;
}
.btn.danger:hover{ background:#fff5f5; }

.alert{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#f8fafc;
  color:var(--text);
  white-space:pre-wrap;
}
.alert.ok{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.alert.bad{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.alert.warn{ background:#fffbeb; border-color:#fde68a; color:#7c2d12; }

.tableWrap{
  width:100%;
  overflow:auto;          /* مهم: يعطي راحة عند كثرة الأعمدة */
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}
table{
  width:100%;
  min-width: 980px;       /* يمنع انكماش الجدول ويدفع للتمرير عند الحاجة */
  border-collapse:separate;
  border-spacing:0;
}
th,td{
  padding:12px 10px;
  border-bottom:1px solid var(--border2);
  text-align:right;
  vertical-align:middle;
  white-space:nowrap;
}
thead th{
  position:sticky;
  top:0;
  background: #fbfdff;
  border-bottom:1px solid var(--border);
  z-index:3;
  font-size:12px;
  color:#334155;
}
tbody tr:hover td{ background:#fafcff; }

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

.kbd{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:10px;
  padding:2px 8px;
  font-weight:800 !important;
  font-size:12px;
}

.loginShell{
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.loginCard{
  width: min(520px, 100%);
  padding:18px;
}
.loginCard .head{
  display:flex; gap:12px; align-items:center; margin-bottom:12px;
}
.loginCard .head .logo{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(135deg,#eff6ff,#ffffff);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
}
.loginCard h1{ margin:0; font-size:16px; }
.loginCard p{ margin:3px 0 0 0; color:var(--muted); font-size:12px; }

.footerLinks{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}


/* ===================[ Hierarchy Row Colors ]=================== */
/* ألوان فاتحة جدًا (White UI) مع منطق: جد/أب/ابن/بنت */
tr.tk-grand td   { background:#fff7ed !important; } /* جد: برتقالي فاتح */
tr.tk-father td  { background:#eff6ff !important; } /* أب: أزرق فاتح */
tr.tk-son td     { background:#f0fdf4 !important; } /* ابن: أخضر فاتح */
tr.tk-daughter td{ background:#fdf2f8 !important; } /* بنت: وردي فاتح */

/* تحسين الحدود حتى مع كثرة الأعمدة */
tr.tk-grand td, tr.tk-father td, tr.tk-son td, tr.tk-daughter td{
  border-bottom:1px solid #eef2f7 !important;
}

/* Hover واضح بدون تكسير لون الفئة */
tbody tr.tk-grand:hover td,
tbody tr.tk-father:hover td,
tbody tr.tk-son:hover td,
tbody tr.tk-daughter:hover td{
  filter: brightness(0.985);
}

/* شارة صغيرة داخل خانة الاسم */
.tk-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:11px;
  color:var(--muted);
}

/* ===================[ Family Tree Row Colors (Admin Configurable) ]=================== */
:root{
  --c-grand:    #fff7ed; /* جد */
  --c-father:   #eff6ff; /* أب */
  --c-son:      #f0fdf4; /* ابن */
  --c-daughter: #fdf2f8; /* بنت */
}

tr.tk-grand td    { background: var(--c-grand) !important; }
tr.tk-father td   { background: var(--c-father) !important; }
tr.tk-son td      { background: var(--c-son) !important; }
tr.tk-daughter td { background: var(--c-daughter) !important; }

tbody tr.tk-grand:hover td,
tbody tr.tk-father:hover td,
tbody tr.tk-son:hover td,
tbody tr.tk-daughter:hover td{ filter: brightness(.985); }

.tk-toggle{
  width:28px;height:28px;border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
}
.tk-toggle:hover{ background:#f8fafc; }

.tk-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border-radius:999px;border:1px solid var(--border);
  background:#fff;font-size:11px;color:var(--muted);
}