@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --teal:#1D9E75; --teal-l:#E1F5EE; --teal-d:#0F6E56;
  --coral:#D85A30; --coral-l:#FAECE7;
  --amber:#BA7517; --amber-l:#FAEEDA;
  --ink:#1a1a1a; --muted:#5f5e5a; --hint:#888780;
  --border:rgba(0,0,0,.1); --surface:#f8f7f4; --white:#ffffff;
  --radius:12px;
  --nav-h:56px;
  --bottom-nav-h:64px; /* mobile bottom nav */
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--surface);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  /* Reserve space for bottom nav on mobile */
  padding-bottom:0;
}
@media(max-width:700px) {
  body { padding-bottom:var(--bottom-nav-h); }
}

h1,h2,h3 { font-family:'Playfair Display',serif; font-weight:500; }
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ─── TOP NAV (desktop) ─── */
.topnav {
  height:var(--nav-h);
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 1.5rem;
  gap:1rem;
  position:sticky;
  top:0;
  z-index:100;
}
.nav-brand {
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  color:var(--ink);
  text-decoration:none;
}
.nav-brand:hover { text-decoration:none; }
.brand-heart { color:var(--teal); }
.nav-links { display:flex; gap:2px; margin-left:auto; align-items:center; flex-wrap:nowrap; }
.nav-link {
  padding:5px 9px;
  border-radius:8px;
  font-size:13px;
  color:var(--muted);
  transition:all .15s;
  white-space:nowrap;
  position:relative;
}
.nav-link:hover { background:var(--surface); color:var(--ink); text-decoration:none; }
.nav-link.active { background:var(--teal-l); color:var(--teal-d); font-weight:500; }
.nav-admin { color:var(--amber); }
.nav-logout { color:var(--hint); }
.nav-hamburger { display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--muted); margin-left:auto; padding:4px; }

/* Notification dot */
.notif-dot {
  position:absolute;
  top:2px; right:2px;
  width:8px; height:8px;
  background:#e05;
  border-radius:50%;
  border:2px solid var(--white);
}

/* Desktop mobile menu (hamburger) */
.mobile-menu { display:none; flex-direction:column; background:var(--white); border-bottom:1px solid var(--border); padding:.8rem 1.5rem; gap:4px; }
.mobile-menu a { font-size:14px; color:var(--ink); padding:8px 0; border-bottom:1px solid var(--border); }
.mobile-menu a:last-child { border-bottom:none; }

/* Hide top nav links on mobile, show hamburger */
@media(max-width:700px) {
  .nav-links { display:none; }
  .nav-hamburger { display:block; }
}

/* ─── MOBILE BOTTOM NAV ─── */
.bottom-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--bottom-nav-h);
  background:var(--white);
  border-top:1px solid var(--border);
  z-index:200;
  padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner {
  display:flex;
  height:100%;
  align-items:stretch;
}
.bottom-nav-item {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-decoration:none;
  color:var(--hint);
  font-size:10px;
  font-weight:500;
  padding:6px 2px;
  border-radius:10px;
  transition:all .15s;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav-item.active { color:var(--teal-d); background:var(--teal-l); }
.bottom-nav-item:hover { text-decoration:none; color:var(--teal-d); }
.bottom-nav-icon { font-size:1.3rem; line-height:1; }
.bottom-nav-label { font-size:10px; line-height:1; }
.bottom-nav-dot {
  position:absolute;
  top:6px; right:50%;
  margin-right:-12px;
  width:8px; height:8px;
  background:#e05;
  border-radius:50%;
  border:2px solid var(--white);
}

@media(max-width:700px) {
  .bottom-nav { display:flex; }
}

/* ─── MAIN CONTENT ─── */
.main-content { max-width:1000px; margin:0 auto; padding:1.5rem 1rem; }
@media(max-width:700px) { .main-content { padding:1rem .75rem; } }

.page-header { margin-bottom:1.25rem; }
.page-header h2 { font-size:1.6rem; margin-bottom:3px; }
@media(max-width:700px) { .page-header h2 { font-size:1.35rem; } }
.page-header p { font-size:13px; color:var(--muted); }

/* ─── ALERTS ─── */
.alert { padding:10px 16px; border-radius:8px; font-size:14px; margin-bottom:1rem; }
.alert-error { background:#FCEBEB; color:#A32D2D; }
.alert-success { background:var(--teal-l); color:var(--teal-d); }

/* ─── AUTH ─── */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem; }
.auth-wrap { width:100%; max-width:420px; }
.auth-brand { text-align:center; margin-bottom:1.5rem; }
.auth-brand h1 { font-size:2rem; margin-bottom:6px; }
.auth-brand p { color:var(--muted); font-size:14px; }
.brand-icon { font-size:2rem; color:var(--teal); margin-bottom:8px; }
.auth-card { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); padding:1.5rem; }
.auth-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.auth-tab { flex:1; text-align:center; padding:10px; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; transition:all .15s; }
.auth-tab.active { color:var(--teal-d); border-bottom-color:var(--teal); font-weight:500; }
.auth-hint { font-size:13px; color:var(--muted); text-align:center; margin-top:1rem; }

/* ─── FORMS ─── */
.field-group { display:flex; flex-direction:column; gap:4px; margin-bottom:1rem; }
.field-group label { font-size:13px; color:var(--muted); }
.hint { font-size:11px; color:var(--hint); }
.req { color:var(--coral); }
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=tel],select,textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:'DM Sans',sans-serif;
  font-size:15px; /* 16px prevents iOS zoom */
  background:var(--white);
  color:var(--ink);
  transition:border-color .15s;
  -webkit-appearance:none;
  appearance:none;
}
input:focus,select:focus,textarea:focus {
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(29,158,117,.1);
}
button {
  padding:10px 18px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--white);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
button:hover { background:var(--surface); }
button:active { transform:scale(.97); }
.btn-primary {
  background:var(--teal);
  color:var(--white);
  border-color:var(--teal);
  width:100%;
  padding:13px;
  font-size:15px;
  font-weight:500;
}
.btn-primary:hover { background:var(--teal-d); border-color:var(--teal-d); color:var(--white); }

.form-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; }
.form-section-title { font-size:12px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.75rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:520px) { .form-grid { grid-template-columns:1fr; } }
.tips-list { padding-left:1.2rem; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.info-card { background:var(--teal-l); border-color:rgba(29,158,117,.2); }

/* ─── TREE ─── */
.tree-outer { overflow-x:auto; overflow-y:visible; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem .75rem; margin-bottom:1.5rem; -webkit-overflow-scrolling:touch; }
.tree-gen { margin-bottom:6px; }
.tree-gen-label { text-align:center; font-size:11px; font-weight:500; color:var(--hint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.gen-count { display:inline-block; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:1px 8px; font-size:10px; margin-left:6px; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
.tree-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.vline { width:1px; height:20px; background:var(--border); margin:0 auto; }
.person-node {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 10px;
  min-width:90px;
  max-width:130px;
  text-align:center;
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.person-node:active { transform:scale(.96); }
.person-node:hover { border-color:var(--teal); box-shadow:0 2px 12px rgba(29,158,117,.12); }
.person-node.root-node { border-color:var(--teal); background:var(--teal-l); }
.person-node.spouse-node { background:var(--surface); }
.person-node.my-node { border:2.5px solid var(--teal); background:linear-gradient(135deg,#E1F5EE,#c8f0e3); box-shadow:0 0 0 3px rgba(29,158,117,.2); }
.me-badge { font-size:9px; background:var(--teal); color:#fff; padding:1px 5px; border-radius:8px; vertical-align:middle; margin-left:2px; }
.person-node.deceased-node { opacity:.75; border-style:dashed; border-color:var(--muted); }
.marhoom-badge { display:block; font-size:10px; color:var(--muted); margin-top:1px; font-family:serif; direction:rtl; }
.node-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; margin:0 auto 5px; overflow:hidden; }
.node-avatar img { width:100%; height:100%; object-fit:cover; }
.node-name { font-size:11px; font-weight:500; color:var(--ink); line-height:1.3; }
.node-meta { font-size:10px; color:var(--hint); margin-top:1px; }
.couple-group { display:flex; align-items:center; gap:5px; }
.heart-join { color:var(--teal); font-size:12px; }
.stats-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:1.25rem; }
.stat-pill { background:var(--white); border:1px solid var(--border); border-radius:20px; padding:5px 10px; font-size:12px; }
.stat-pill strong { color:var(--teal-d); }
.gender-pill { font-size:10px; color:var(--hint); margin-left:3px; }
.loading { text-align:center; padding:3rem; color:var(--hint); }
.link-banner { background:var(--amber-l); border:1px solid var(--amber); border-radius:var(--radius); padding:10px 14px; margin-bottom:1.25rem; font-size:13px; display:flex; align-items:center; gap:10px; }

/* ─── BIRTHDAYS ─── */
.bday-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:1.25rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.filter-btn { padding:7px 14px; border-radius:20px; font-size:13px; white-space:nowrap; flex-shrink:0; }
.filter-btn.active { background:var(--teal-l); color:var(--teal-d); border-color:var(--teal); }
.bday-list { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.bday-item { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); }
.bday-item:last-child { border-bottom:none; }
.bday-item.is-me { background:var(--teal-l); }
.bday-countdown { min-width:48px; text-align:center; }
.count-num { display:block; font-size:20px; font-weight:500; color:var(--teal-d); line-height:1; }
.count-label { font-size:10px; color:var(--hint); }
.bday-info { flex:1; min-width:0; }
.bday-name { font-size:14px; font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bday-meta { font-size:12px; color:var(--muted); margin-top:2px; }
.age-chip { font-size:11px; background:var(--surface); border:1px solid var(--border); padding:2px 7px; border-radius:20px; color:var(--muted); font-weight:400; white-space:nowrap; }

/* ─── BADGES ─── */
.badge { font-size:11px; padding:2px 8px; border-radius:20px; font-weight:500; }
.badge-today { background:var(--teal-l); color:var(--teal-d); }
.badge-soon { background:var(--amber-l); color:var(--amber); }
.badge-month { background:var(--coral-l); color:var(--coral); }
.me-badge-inline { font-size:10px; background:var(--teal); color:#fff; padding:1px 6px; border-radius:8px; }

/* ─── ADMIN ─── */
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media(max-width:700px) { .admin-grid { grid-template-columns:1fr; } }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:.75rem; }
.admin-table th { text-align:left; font-weight:500; color:var(--muted); padding:6px 0; border-bottom:1px solid var(--border); }
.admin-table td { padding:7px 0; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }

/* ─── MISC ─── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--hint); font-size:14px; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--white); border-radius:var(--radius); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; }

/* Onboarding checklist */
.onboarding-card { background:linear-gradient(135deg,var(--teal-l),#c8f0e3); border:1px solid rgba(29,158,117,.3); border-radius:var(--radius); padding:1.25rem; margin-bottom:1.5rem; }
.onboarding-title { font-family:'Playfair Display',serif; font-size:1.1rem; margin-bottom:.75rem; color:var(--teal-d); }
.onboarding-item { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; border-bottom:1px solid rgba(29,158,117,.15); }
.onboarding-item:last-child { border-bottom:none; }
.onboarding-check { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.onboarding-check.done { background:var(--teal); color:#fff; }
.onboarding-check.todo { background:rgba(29,158,117,.2); color:var(--teal-d); }
.onboarding-dismiss { font-size:12px; color:var(--teal-d); margin-top:.75rem; cursor:pointer; text-decoration:underline; }

/* Directory */
.directory-grid { display:flex; flex-direction:column; gap:0; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.directory-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; transition:background .1s; }
.directory-item:last-child { border-bottom:none; }
.directory-item:hover { background:var(--surface); text-decoration:none; }
.dir-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; flex-shrink:0; overflow:hidden; }
.dir-avatar img { width:100%; height:100%; object-fit:cover; }
.dir-info { flex:1; min-width:0; }
.dir-name { font-size:14px; font-weight:500; }
.dir-meta { font-size:12px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dir-contact { font-size:12px; color:var(--hint); margin-top:1px; }
.dir-gen { font-size:10px; background:var(--surface); border:1px solid var(--border); padding:1px 7px; border-radius:20px; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.search-box { position:relative; margin-bottom:1rem; }
.search-box input { padding-left:38px; font-size:15px; }
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--hint); pointer-events:none; }

/* Profile picture upload */
.profile-photo-wrap { position:relative; width:80px; height:80px; margin:0 auto 10px; }
.profile-photo-wrap img,
.profile-photo-wrap .no-photo { width:80px; height:80px; border-radius:50%; object-fit:cover; display:block; }
.profile-photo-wrap .no-photo { display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:500; }
.photo-upload-btn { position:absolute; bottom:0; right:0; width:26px; height:26px; background:var(--teal); color:#fff; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; line-height:1; }

/* Privacy toggle */
.privacy-toggle { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--hint); cursor:pointer; margin-top:3px; }
.privacy-toggle input[type=checkbox] { width:auto; }

@media(min-width:701px) {
  .bottom-nav { display: none !important; }
}