/* ==========================================================================
   vanshavali.css
   All rules are scoped under .vanshavali-app so nothing here can leak out
   and affect the rest of Printzon.in. No global element selectors
   (body, h1, button, input, etc.) are used unqualified.
   ========================================================================== */

.vanshavali-app {
  --vs-ink: #2b2620;
  --vs-line: #3a3226;
  --vs-border: #c9bfa8;
  --vs-paper: #ffffff;
  --vs-panel-bg: #faf8f4;
  --vs-accent: #8a5a2b;
  --vs-accent-soft: #efe6d8;
  --vs-danger: #a13d3d;
  --vs-font-ui: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali',
    'Noto Sans Gujarati', 'Noto Sans Tamil', 'Noto Sans Telugu',
    'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Oriya',
    'Noto Sans Gurmukhi', 'Noto Nastaliq Urdu', system-ui, sans-serif;

  font-family: var(--vs-font-ui);
  color: var(--vs-ink);
  background: #f2efe9;
  min-height: 100vh;
  box-sizing: border-box;
}

.vanshavali-app *,
.vanshavali-app *::before,
.vanshavali-app *::after {
  box-sizing: border-box;
}

.vanshavali-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--vs-border);
  background: var(--vs-paper);
}

.vanshavali-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.vanshavali-lang-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.vanshavali-lang-picker label {
  font-size: 12px;
  color: #6b6255;
  white-space: nowrap;
}

.vanshavali-lang-select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--vs-border);
  border-radius: 6px;
  background: var(--vs-paper);
  color: var(--vs-ink);
}

/* When Urdu (RTL) is active, the surrounding chrome mirrors, but the
   printed/exported family tree itself always stays LTR - see the
   dir="ltr" set directly on .vanshavali-a4-sheet in the markup, which
   overrides this regardless of the app's overall direction. */
.vanshavali-app[dir="rtl"] .vanshavali-entry-children {
  border-left: none;
  border-right: 1px dashed var(--vs-border);
  padding-left: 0;
  padding-right: 14px;
}

.vanshavali-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.vanshavali-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b6255;
}

.vanshavali-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 20px;
  padding: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .vanshavali-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Data entry panel ---------------- */

.vanshavali-panel {
  background: var(--vs-panel-bg);
  border: 1px solid var(--vs-border);
  border-radius: 8px;
  padding: 18px;
}

.vanshavali-panel h2 {
  font-size: 15px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vs-border);
}

.vanshavali-field-label {
  display: block;
  font-size: 12px;
  color: #6b6255;
  margin-bottom: 4px;
}

.vanshavali-text-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--vs-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  background: var(--vs-paper);
  color: var(--vs-ink);
}

.vanshavali-text-input:focus {
  outline: 2px solid var(--vs-accent);
  outline-offset: 1px;
}

.vanshavali-root-block {
  margin-bottom: 16px;
}

.vanshavali-toolbar-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.vanshavali-btn {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--vs-border);
  background: var(--vs-paper);
  color: var(--vs-ink);
  cursor: pointer;
}

.vanshavali-btn:hover:not(:disabled) {
  background: var(--vs-accent-soft);
}

.vanshavali-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vanshavali-btn-primary {
  background: var(--vs-accent);
  border-color: var(--vs-accent);
  color: #fff;
}

.vanshavali-btn-primary:hover:not(:disabled) {
  background: #744a22;
}

.vanshavali-btn-danger {
  color: var(--vs-danger);
  border-color: #d8b9b9;
}

.vanshavali-btn-danger:hover:not(:disabled) {
  background: #f6e9e9;
}

.vanshavali-btn-small {
  padding: 4px 8px;
  font-size: 12px;
}

.vanshavali-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: #6b6255;
}

.vanshavali-entry-list,
.vanshavali-entry-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vanshavali-entry-item {
  margin-bottom: 4px;
}

.vanshavali-entry-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--vs-paper);
  border: 1px solid var(--vs-border);
  border-radius: 6px;
  flex-wrap: wrap;
}

.vanshavali-toggle {
  width: 20px;
  height: 20px;
  flex: none;
  border: none;
  background: transparent;
  color: #6b6255;
  cursor: pointer;
  font-size: 11px;
}

.vanshavali-toggle:disabled {
  cursor: default;
  color: #b8ae9c;
}

.vanshavali-entry-name {
  flex: 1 1 auto;
  min-width: 80px;
  font-size: 14px;
  word-break: break-word;
}

.vanshavali-entry-edit-input {
  flex: 1 1 auto;
  min-width: 80px;
  font-family: inherit;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--vs-accent);
  border-radius: 4px;
}

.vanshavali-entry-actions {
  display: flex;
  gap: 4px;
  flex: none;
}

.vanshavali-entry-children {
  margin-top: 4px;
  padding-left: 14px;
  border-left: 1px dashed var(--vs-border);
}

.vanshavali-empty-hint {
  font-size: 13px;
  color: #8a8072;
  padding: 8px 2px;
}

/* ---------------- Modal ---------------- */

.vanshavali-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 26, 20, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.vanshavali-modal-overlay.vanshavali-modal-open {
  display: flex;
}

.vanshavali-modal {
  background: var(--vs-paper);
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.vanshavali-modal h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.vanshavali-modal p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}

.vanshavali-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* ---------------- Preview panel ---------------- */

.vanshavali-preview-panel {
  background: var(--vs-panel-bg);
  border: 1px solid var(--vs-border);
  border-radius: 8px;
  padding: 18px;
}

.vanshavali-preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.vanshavali-preview-toolbar h2 {
  font-size: 15px;
  margin: 0;
}

.vanshavali-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vanshavali-a4-outer {
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  background: #e7e2d6;
  border-radius: 6px;
  padding: 16px;
}

/* Fixed real A4-landscape dimensions so the on-screen preview is a true
   1:1 representation of the printed page. */
.vanshavali-a4-sheet {
  width: 297mm;
  height: 210mm;
  min-width: 297mm;
  min-height: 210mm;
  background: var(--vs-paper);
  border: 1px solid var(--vs-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8mm 10mm;
}

.vanshavali-a4-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--vs-line);
  padding-bottom: 6px;
  margin: 0 0 6px;
  flex: none;
}

.vanshavali-tree-area {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vanshavali-preview-hint {
  color: #8a8072;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.vanshavali-tree-canvas {
  position: relative;
}

.vanshavali-tree-lines {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.vanshavali-line {
  stroke: var(--vs-line);
  stroke-width: 1.4;
}

.vanshavali-node {
  position: absolute;
  border: 1.1px solid var(--vs-line);
  background: var(--vs-paper);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px 6px;
  line-height: 1.2;
  overflow: hidden;
}

.vanshavali-node span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.vanshavali-footer-note {
  margin-top: 10px;
  font-size: 12px;
  color: #8a8072;
  text-align: center;
}

/* ---------------- Print ---------------- */

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }

  body * {
    visibility: hidden;
  }

  .vanshavali-a4-sheet,
  .vanshavali-a4-sheet * {
    visibility: visible;
  }

  .vanshavali-a4-sheet {
    position: fixed;
    inset: 0;
    width: 297mm;
    height: 210mm;
    min-width: 0;
    min-height: 0;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 8mm 10mm;
  }
}