/* ═══════════════════════════════════════
   GiaPha — Viewer CSS
═══════════════════════════════════════ */

* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
.app { display: flex; flex-direction: column; height: 100vh; }

/* ── Topbar ─────────────────────────── */
.topbar {
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  color: white; padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  height: 56px; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.topbar h1   { margin: 0; font-size: 17px; font-weight: 700; white-space: nowrap; }
.topbar small { font-size: 10.5px; opacity: .8; display: block; margin-top: 1px; }

/* View toggle */
.view-toggle {
  display: flex; background: rgba(255,255,255,.15);
  border-radius: var(--radius-full); padding: 3px; gap: 3px;
}
.vt-btn {
  border: none; border-radius: var(--radius-full); padding: 4px 12px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; background: transparent; color: rgba(255,255,255,.8);
  transition: .15s;
}
.vt-btn.active { background: white; color: var(--green-dark); }

/* Gen filter + buttons */
.tb-gen, .tb-btn {
  border: none; border-radius: var(--radius-sm);
  padding: 6px 12px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.tb-gen { background: rgba(255,255,255,.9); }
.tb-btn { background: rgba(255,255,255,.9); color: var(--green-dark); font-weight: 600; }
.tb-btn:hover { background: white; }

/* Search */
.tb-search { position: relative; margin-left: auto; }
.tb-search input {
  border: none; border-radius: var(--radius-full); padding: 6px 14px;
  font-family: inherit; font-size: 13px; width: 170px; outline: none;
}
.sr-drop {
  position: absolute; top: calc(100% + 5px); right: 0;
  background: white; border-radius: var(--radius-md); min-width: 240px;
  max-height: 200px; overflow-y: auto; display: none;
  box-shadow: var(--shadow-md); z-index: 999;
}
.sr-it {
  padding: 9px 12px; cursor: pointer; font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #f0ece4; color: var(--text-dark);
}
.sr-it:hover { background: #f5f2ec; }

/* ── Family chart container ─────────── */
.f3 {
  --background-color: var(--cream);
  --text-color: var(--text-dark);
  font-family: 'Be Vietnam Pro', sans-serif !important;
}
.f3.f3-cont {
  width: 100%; height: calc(100vh - 56px); max-height: none;
  background-color: var(--cream);
}
.f3 .link { stroke: #5a7a5a !important; stroke-width: 2px !important; }
.f3 .link.f3-path-to-main { stroke: var(--green-dark) !important; stroke-width: 3px !important; }

/* ── List view ──────────────────────── */
#listView {
  display: none; position: fixed;
  top: 56px; left: 0; right: 0; bottom: 0;
  overflow-y: auto; z-index: 50;
  background: var(--cream); padding: 12px 16px 80px;
}

/* ── Info panel ─────────────────────── */
.info-panel {
  position: fixed; right: 16px; bottom: 16px; width: 250px;
  background: white; border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-md); z-index: 500; display: none;
  font-size: 13px;
}
.ip-name { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.ip-row  { margin-bottom: 6px; color: var(--text-mid); line-height: 1.5; }
.ip-row strong { color: var(--text-dark); min-width: 100px; display: inline-block; }
.ip-close {
  position: absolute; top: 10px; right: 12px; cursor: pointer;
  font-size: 16px; color: #aaa; border: none; background: none;
}
.ip-close:hover { color: #666; }

/* ── Data badge ─────────────────────── */
.data-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 500;
  background: #fffbe6; border: 1px solid #f0d070; border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 10.5px; color: #7a6010; line-height: 1.6;
}

/* ── Mobile ─────────────────────────── */
.bottom-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: white; border-top: 1px solid var(--border);
  padding: 8px 12px 14px; z-index: 100;
  box-shadow: 0 -2px 10px rgba(0,0,0,.08); gap: 8px; align-items: center;
}
.bb-toggle {
  border: none; border-radius: var(--radius-sm); padding: 8px 12px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; background: #f0f0f0; color: #444;
  white-space: nowrap; flex-shrink: 0;
}
.bb-toggle.active { background: var(--green-dark); color: white; }

@media (max-width: 768px) {
  .topbar { height: auto; min-height: 52px; padding: 8px 12px; flex-wrap: wrap; }
  .topbar h1 { font-size: 15px; }
  .tb-search, .tb-gen, .view-toggle { display: none !important; }
  .tb-btn { font-size: 11px; padding: 5px 9px; }
  .f3.f3-cont { height: calc(100vh - 52px - 60px) !important; }
  #listView { top: 52px; bottom: 60px; padding-bottom: 20px; }
  .bottom-bar { display: flex; }
  .info-panel {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; border-radius: 20px 20px 0 0 !important;
    max-height: 65vh; overflow-y: auto; padding-bottom: 24px;
  }
  .data-badge { display: none; }
}

/* ══ INFO PANEL DETAIL ══════════════════════════════════════ */
.info-panel { width: 280px; }

.ip-photo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--border);
  float: right; margin: 0 0 8px 12px;
}
.ip-section { margin-bottom: 12px; overflow: hidden; }
.ip-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ip-table td { padding: 3px 0; vertical-align: top; }
.ip-table td:first-child {
  color: var(--text-light); width: 70px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  padding-right: 8px; white-space: nowrap;
}
.ip-note {
  font-size: 11.5px; color: #c07030; margin-top: 6px;
  background: #fff8f0; border-radius: 6px; padding: 5px 8px;
}

/* Wife sections */
.ip-wife {
  margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.ip-wife-header {
  background: var(--amber-pale); padding: 6px 10px;
  font-size: 12px; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.ip-wife-header small { color: var(--text-light); }
.ip-wife-badge {
  background: var(--amber-mid); color: white;
  border-radius: 20px; padding: 1px 8px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.ip-wife-badge.unknown { background: #aaa; }
.ip-wife-name { font-weight: 600; font-size: 13px; color: var(--text-dark); }
.ip-no-child {
  font-size: 11.5px; color: var(--text-light);
  padding: 6px 10px; font-style: italic;
}
.ip-children { padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.ip-child {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; padding: 2px 0;
}
.ip-child-stt {
  font-weight: 700; width: 42px; min-width: 42px;
  text-align: right; flex-shrink: 0; font-size: 11.5px;
  font-family: monospace;
}
.ip-child-name { flex: 1; }
.ip-son .ip-child-stt      { color: var(--green-dark); }
.ip-daughter .ip-child-stt { color: var(--amber-dark); font-size: 14px; }
.ip-son .ip-child-name      { color: var(--text-dark); }
.ip-daughter .ip-child-name { color: #7a5030; font-style: italic; }

/* ── Daughter expand inline ─────────────────────── */
.ip-daughter-toggle {
  cursor: pointer; display: inline-flex;
  align-items: center; gap: 4px;
}
.ip-daughter-toggle:hover { text-decoration: underline; }
.ip-expand-icon {
  font-size: 9px; color: var(--amber-dark);
  transition: transform .2s;
}
.ip-daughter-info {
  display: none;
  margin-top: 5px; padding: 8px 10px;
  background: #fffaf4; border-left: 3px solid var(--amber-mid);
  border-radius: 0 6px 6px 0;
  font-size: 12px; color: var(--text-mid);
  line-height: 1.6; white-space: pre-wrap;
}