/* BranchLite Team
 * Copyright (c) 2026 This Family Love LLC. All rights reserved.
 * Proprietary and confidential — unauthorized copying, distribution, or use
 * of this file, via any medium, is strictly prohibited without a license
 * agreement with This Family Love LLC.
 */

/* ── Brand palette (visual facelift) ──────────────────────────────
   Warm, family-centered palette — see PR/plan discussion. Colors were
   picked and then checked for real WCAG contrast (not eyeballed):
   --accent-primary and --danger both clear 4.5:1 against white button
   text; --text-primary and --text-secondary both clear 4.5:1 against
   --bg-page. Change values here, not by hardcoding colors elsewhere. */
:root {
  --bg-page: #FBF3EA;
  --bg-card: #FFFDF9;
  --accent-primary: #B85B3D;       /* 4.56:1 vs white */
  --accent-primary-hover: #A34E33; /* 5.68:1 vs white */
  --text-primary: #2B241F;         /* 13.9:1 vs --bg-page */
  --text-secondary: #766757;       /* 4.97:1 vs --bg-page */
  --border-soft: #E6DACB;
  --danger: #B5544A;               /* 4.85:1 vs white */
  --danger-hover: #9C443A;         /* 6.36:1 vs white */
  --shadow-soft: 0 2px 10px rgba(60, 40, 20, 0.08);

  /* Bootstrap variable remap — NOT relied on alone; every component this
     is meant to reach (.btn-outline-primary, .btn-outline-danger, .card,
     links) has an explicit rule below too, because Bootstrap 5.3's
     compiled CSS doesn't consistently reference these at every call site.
     Deliberately NOT touching --bs-success/--bs-warning/--bs-info: those
     still mean "this succeeded / caution / heads-up" in flash messages
     and free-tier notices. */
  --bs-body-bg: var(--bg-page);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-soft);
  --bs-secondary-color: var(--text-secondary);
  --bs-card-bg: var(--bg-card);
  --bs-card-border-color: var(--border-soft);
  --bs-primary: var(--accent-primary);
  --bs-primary-rgb: 184, 91, 61;
  --bs-link-color: var(--accent-primary);
  --bs-link-hover-color: var(--accent-primary-hover);
  --bs-danger: var(--danger);
  --bs-danger-rgb: 181, 84, 74;
}

body { background-color: var(--bg-page); color: var(--text-primary); }

.navbar.bg-dark { background-color: var(--text-primary) !important; }

.card {
  background-color: var(--bg-card);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

/* Explicit overrides for Bootstrap components whose compiled CSS doesn't
   pick up the --bs-primary/--bs-danger remap at every property (verified
   in-browser, not assumed) — kept minimal, no functional/markup change. */
.btn-outline-primary {
  --bs-btn-color: var(--accent-primary);
  --bs-btn-border-color: var(--accent-primary);
  --bs-btn-hover-bg: var(--accent-primary);
  --bs-btn-hover-border-color: var(--accent-primary);
  --bs-btn-active-bg: var(--accent-primary-hover);
  --bs-btn-active-border-color: var(--accent-primary-hover);
}
/* Solid .btn-primary (e.g. the edit-person modal's "Save") — also
   hardcoded blue in Bootstrap's compiled CSS, verified in-browser. */
.btn-primary {
  --bs-btn-bg: var(--accent-primary);
  --bs-btn-border-color: var(--accent-primary);
  --bs-btn-hover-bg: var(--accent-primary-hover);
  --bs-btn-hover-border-color: var(--accent-primary-hover);
  --bs-btn-active-bg: var(--accent-primary-hover);
  --bs-btn-active-border-color: var(--accent-primary-hover);
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-bg: var(--danger-hover);
  --bs-btn-active-border-color: var(--danger-hover);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border-soft);
  --bs-btn-hover-bg: var(--text-secondary);
  --bs-btn-hover-border-color: var(--text-secondary);
}
a { color: var(--accent-primary); }
a:hover { color: var(--accent-primary-hover); }

/* Solid brand CTA — for buttons that ARE the primary action but aren't a
   "success" state (those stay Bootstrap's default green via
   .btn-success/.alert-success, untouched). */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-primary);
  --bs-btn-border-color: var(--accent-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-primary-hover);
  --bs-btn-hover-border-color: var(--accent-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-primary-hover);
  --bs-btn-active-border-color: var(--accent-primary-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--accent-primary);
  --bs-btn-disabled-border-color: var(--accent-primary);
  color: #fff;
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* Bootstrap's checked form-switch/checkbox track hardcodes its own blue
   (#0d6efd) rather than referencing --bs-primary — verified in-browser,
   not assumed. Minimal, visual-only override. */
.form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.form-check-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 0.25rem rgba(184, 91, 61, 0.25);
}

/* Same issue, .form-control (text inputs, selects, textareas) — verified
   by actually focusing an input and reading its computed style, not
   assumed from the root remap. */
.form-control:focus,
.form-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 0.25rem rgba(184, 91, 61, 0.25);
}

/* ── Collapsible section headers (G013) ─────────────────────────── */
.card-header.btn.btn-link {
  color: inherit;
  border-radius: 0;
}
.card-header.btn.btn-link:hover,
.card-header.btn.btn-link:focus {
  color: inherit;
}
.section-caret {
  transition: transform 0.15s ease;
}
.card-header.btn[aria-expanded="false"] .section-caret {
  transform: rotate(-90deg);
}

/* ── Photo thumbnails ────────────────────────────────────────────── */
.person-thumb {
  width: 48px;
  height: 60px;           /* portrait oval */
  border-radius: 50%;     /* ellipse on non-square box */
  object-fit: cover;
  flex-shrink: 0;
  background: #e9ecef;
}

.person-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #adb5bd;
  border: 1px solid #dee2e6;
}

/* Larger oval for the edit modal preview */
.person-thumb-lg {
  width: 72px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e9ecef;
}

/* ── Tree zoom controls overlay ─────────────────────────────────────── */
.tree-wrap {
  position: relative;
  /* Kept pure white (not --bg-card's pale cream) — the on-screen canvas
     should already match exactly what PNG/PDF/print export, so there's
     no cream-to-white shift to account for at export time. */
  background-color: #ffffff;
}

.tree-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.tree-controls button {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.9);
}

/* ── Print styles ──────────────────────────────────────────────────── */
/* Default page setup; orientation is overridden per-tree by JS (see
   printTree() in manage.html) to match the tree's own aspect ratio. */
@page {
  size: letter landscape;
  margin: 6.35mm;
}

@media print {
  /* Sidebar hidden; tree column fills the full page width. display:block
     matters: Chromium's print engine pushes a flex container's later children
     (the footer) onto a second page even with room to spare — block layout
     fragments predictably and keeps everything on one page. */
  .col-md-8.col-lg-9 {
    display: block !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Clean white page — explicit even though --bg-card is already close to
     white, so the facelift's palette can never affect printed output. */
  body  { background: white !important; color: black !important; }
  .card { background: white !important; border: none !important; box-shadow: none !important; }

  /* Centre the print <img> (swapped in by printTree()) on the page. */
  #tree-container {
    overflow: visible !important;
    border-radius: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Running header/footer — in-flow blocks, exactly one printed page.
     Heights are reserved in printTree()'s HEADER_RESERVE_PX /
     FOOTER_RESERVE_PX (manage.html); keep the two in sync. */
  .print-page-header {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 8px 0;
  }

  .print-page-footer {
    margin: 8px 0 0 0;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
  }
  .print-footer-brand { font-size: 9px; color: #6c757d; }
  .print-footer-count { font-size: 7px; color: #adb5bd; }
  .print-footer-logo  { height: 14px; width: auto; }
}