/* Modern card-based styles for shajara plugin */
.shajara-container{
  background: #f7fafc;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #111827;
}
.shajara-tabs{display:flex;gap:8px;border-bottom:1px solid #e6e6e6;padding-bottom:8px}
.shajara-tab-btn{
  background:#fff;border:1px solid #e5e7eb;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600;
}
.shajara-tab-btn:hover{box-shadow:0 4px 12px rgba(0,0,0,0.04)}
.shajara-section{margin-top:12px;background:#fff;padding:14px;border-radius:8px;border:1px solid #eef2f7}
.shajara-section label{display:block;margin-bottom:8px;font-weight:600}
.shajara-section input[type="text"], .shajara-section input[type="date"], .shajara-section input[type="number"], .shajara-section select, .shajara-section textarea{
  width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;margin-top:6px;background:#fbfbfb;
}
.shajara-section button.button-primary{
  background:linear-gradient(180deg,#2563eb,#1e40af);border:none;color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;
}
#shajara-form-message{margin-top:10px;color:#065f46}

/* Tree styles */
#shajara-tree{background:#fff;padding:12px;border-radius:8px;border:1px solid #eef2f7}
#shajara-tree ul{list-style:none;margin:0;padding-left:18px}
#shajara-tree li{margin:8px 0}
.node{display:flex;align-items:center;gap:12px;cursor:pointer;padding:10px;border-radius:8px;border:1px solid transparent}
.node:hover{background:#f1f5f9;border-color:#e2e8f0;box-shadow:0 6px 18px rgba(2,6,23,0.03)}
.node img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid #e6e6e6}

/* Make the network container full width and responsive */
#shajara-network{width:100%;height:480px;background:#ffffff;border-radius:8px;border:1px solid #eef2f7;padding:8px;margin-top:12px}
@media (max-width:600px){ #shajara-network{height:380px} }