/* Lutheran Church Mailakkara - Admin Panel mockups
   Palette derived from the Luther Rose logo */

:root {
  --lc-navy: #1a2b5c;
  --lc-navy-dark: #0f1a3c;
  --lc-navy-soft: #2a3e7a;
  --lc-gold: #d4a017;
  --lc-gold-soft: #e9c25a;
  --lc-red: #b91c1c;
  --lc-red-dark: #8a1313;
  --lc-bg: #f6f4ef;
  --lc-card: #ffffff;
  --lc-border: #e6e2d8;
  --lc-text: #1f2a44;
  --lc-muted: #6b7280;
}

html, body {
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, .serif {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  letter-spacing: 0.2px;
}

/* ------- Sidebar ------- */
.lc-sidebar {
  background:
    radial-gradient(ellipse at top, rgba(212,160,23,0.10), transparent 55%),
    linear-gradient(180deg, var(--lc-navy) 0%, var(--lc-navy-dark) 100%);
  color: #f4efe2;
  width: 248px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08);
}

.lc-sidebar .brand {
  padding: 26px 22px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.lc-sidebar .brand::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.4), transparent);
}
.lc-sidebar .brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.lc-sidebar .brand .title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.15;
  color: #fff;
  letter-spacing: 0.3px;
}
.lc-sidebar .brand .subtitle {
  font-size: 0.66rem;
  color: var(--lc-gold-soft);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-top: 3px;
}

.lc-nav { padding: 18px 12px; flex: 1; }
.lc-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: #cfcab8;
  font-size: 0.92rem;
  margin-bottom: 4px;
  position: relative;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.lc-nav a:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.lc-nav a:hover svg {
  background: rgba(212,160,23,0.18);
  color: var(--lc-gold-soft);
}
.lc-nav a.active {
  background: linear-gradient(90deg, rgba(212,160,23,0.18), rgba(212,160,23,0.04));
  color: #fff;
}
.lc-nav a.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px; bottom: 8px;
  width: 3px;
  background: var(--lc-gold);
  border-radius: 0 3px 3px 0;
}
.lc-nav a.active svg {
  background: linear-gradient(135deg, var(--lc-gold), #c89512);
  color: var(--lc-navy);
}
.lc-nav a svg {
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background 0.18s, color 0.18s;
}

.lc-sidebar .foot {
  padding: 16px 22px;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.4px;
  position: relative;
}
.lc-sidebar .foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.3), transparent);
}

/* ------- Main area ------- */
.lc-main {
  margin-left: 248px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.lc-topbar {
  background: #fff;
  border-bottom: 1px solid var(--lc-border);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.lc-topbar h1 {
  font-size: 1.7rem;
  color: var(--lc-navy);
  margin: 0;
  letter-spacing: 0.2px;
}
.lc-topbar .crumb {
  font-size: 0.72rem;
  color: var(--lc-muted);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 2px;
}
.lc-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.lc-user .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lc-navy);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}

.lc-content { padding: 28px; flex: 1; }

.lc-footer {
  border-top: 1px solid var(--lc-border);
  background: linear-gradient(180deg, #fcfaf3 0%, #f6f4ef 100%);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--lc-muted);
  text-align: center;
}
.lc-footer .mark {
  color: var(--lc-gold);
  font-size: 0.95rem;
  line-height: 1;
}
.lc-footer strong {
  color: var(--lc-navy);
  font-weight: 600;
}

.login-copyright {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--lc-muted);
  letter-spacing: 0.3px;
  z-index: 2;
}
.login-copyright .mark { color: var(--lc-gold); }
.login-copyright strong { color: var(--lc-navy); font-weight: 600; }
.login-copyright a { color: var(--lc-muted); }

.lc-card {
  background: var(--lc-card);
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px rgba(15, 23, 42, 0.04);
}

/* Inline name+avatar cell for tables */
.member-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex-shrink: 0;
  position: relative;
}
.initials.male { background: linear-gradient(135deg, #2a3e7a, #5470b6); }
.initials.female { background: linear-gradient(135deg, #a85a5a, #d49494); }
.initials.gold { background: linear-gradient(135deg, var(--lc-gold), #c89512); color: var(--lc-navy); }
.initials.deceased {
  background: linear-gradient(135deg, #6e6856, #a39c87);
  filter: grayscale(0.6);
}
.initials .crown {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background: var(--lc-gold);
  color: var(--lc-navy);
  border-radius: 50%;
  font-size: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
}
.member-cell .name-block { display: flex; flex-direction: column; line-height: 1.15; }
.member-cell .sub { font-size: 0.72rem; color: var(--lc-muted); }

/* ------- Buttons ------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.2px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--lc-red), #d04646);
  color: #fff;
  border-color: var(--lc-red);
  box-shadow: 0 3px 10px rgba(185, 28, 28, 0.22);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--lc-red-dark), var(--lc-red));
  box-shadow: 0 6px 16px rgba(185, 28, 28, 0.3);
  transform: translateY(-1px);
}
.btn-secondary {
  background: #fff;
  color: var(--lc-navy);
  border-color: var(--lc-navy);
}
.btn-secondary:hover {
  background: var(--lc-navy);
  color: #fff;
  box-shadow: 0 6px 16px rgba(26, 43, 92, 0.22);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--lc-muted);
  border-color: var(--lc-border);
}
.btn-ghost:hover { background: #f3f0e8; color: var(--lc-text); border-color: var(--lc-gold-soft); }
.btn-sm { padding: 6px 11px; font-size: 0.82rem; }

/* ------- Form fields ------- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.83rem;
  color: var(--lc-navy);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=date],
.field input[type=tel],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  font-size: 0.92rem;
  background: #fff;
  transition: border 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--lc-navy);
  box-shadow: 0 0 0 3px rgba(26, 43, 92, 0.1);
}
.field .hint { font-size: 0.78rem; color: var(--lc-muted); margin-top: 4px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }

.form-section {
  border-top: 1px solid var(--lc-border);
  margin-top: 22px;
  padding-top: 22px;
}
.form-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.form-section h3 {
  font-size: 1.05rem;
  color: var(--lc-navy);
  margin-bottom: 14px;
}
.conditional-block {
  background: #faf7ee;
  border: 1px dashed var(--lc-gold);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.conditional-block .lbl {
  font-size: 0.78rem;
  color: var(--lc-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* ------- Table ------- */
.lc-table { width: 100%; border-collapse: collapse; }
.lc-table thead th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--lc-muted);
  padding: 14px 18px;
  border-bottom: 1px solid var(--lc-border);
  background: #faf8f1;
  font-weight: 600;
}
.lc-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--lc-border);
  font-size: 0.92rem;
}
.lc-table tbody tr:last-child td { border-bottom: none; }
.lc-table tbody tr {
  position: relative;
  transition: background 0.15s;
}
.lc-table tbody tr:hover { background: #fbf9f2; }
.lc-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--lc-gold);
}

/* ------- Badges ------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-active { background: #e0f1e3; color: #1a6b30; }
.badge-inactive { background: #f0e7e7; color: #8a1313; }
.badge-current { background: #e7eef7; color: var(--lc-navy); }
.badge-transferred { background: #fff1d8; color: #8a6210; }
.badge-expired { background: #efe5e5; color: #555; }

/* ------- Search bar ------- */
.search-bar {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.search-bar input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
}
.search-bar svg {
  position: absolute;
  left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--lc-muted);
}

/* ------- Tabs ------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--lc-border);
  padding: 0 8px;
}
.tabs button {
  background: none;
  border: none;
  padding: 14px 18px;
  font-size: 0.95rem;
  color: var(--lc-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.tabs button.active {
  color: var(--lc-navy);
  border-bottom-color: var(--lc-gold);
  font-weight: 600;
}

/* ------- Family tree (creative redesign, compact) ------- */
.tree {
  padding: 28px 20px 22px;
  overflow-x: auto;
  background:
    radial-gradient(ellipse at top, rgba(212,160,23,0.05), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(26,43,92,0.03), transparent 55%),
    #fcfaf3;
  border-radius: 0 0 12px 12px;
  position: relative;
}
.tree::before {
  content: '✚';
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  color: var(--lc-gold-soft);
  font-size: 0.95rem;
  opacity: 0.55;
}

.tree ul {
  position: relative;
  padding-top: 26px;
  display: flex;
  justify-content: center;
}
.tree ul ul { padding-top: 26px; }
.tree li {
  list-style: none;
  position: relative;
  padding: 26px 12px 0 12px;
  text-align: center;
}

/* connectors */
.tree li::before, .tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid rgba(212, 160, 23, 0.55);
  width: 50%;
  height: 26px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid rgba(212, 160, 23, 0.55);
}
.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before {
  border-right: 2px solid rgba(212, 160, 23, 0.55);
  border-top-right-radius: 8px;
}
.tree li:first-child::after { border-top-left-radius: 8px; }
.tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid rgba(212, 160, 23, 0.55);
  width: 0;
  height: 26px;
}

.tree .node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  min-width: 122px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tree .node:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  border-color: var(--lc-gold-soft);
}

/* Smaller avatars */
.tree .node .avatar {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  border-width: 2px;
  margin-top: 0;
  margin-bottom: 6px;
}
.tree .node .name { font-size: 0.82rem; }
.tree .node .role { font-size: 0.6rem; margin-top: 2px; }
.tree .node .meta {
  font-size: 0.68rem;
  margin-top: 5px;
  padding: 1px 7px;
}

/* ----- Couple wrapper (husband ─── wife joined by marriage ring) ----- */
.tree .couple {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  position: relative;
}

/* Heart icon between spouses — no background circle, just a small heart with a thin connector line behind it */
.tree .couple .marriage-link {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 -2px;
  z-index: 2;
  color: var(--lc-red);
}
.tree .couple .marriage-link svg {
  width: 16px;
  height: 16px;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(185, 28, 28, 0.2));
}
.tree .couple .marriage-link::before {
  /* thin gold connector bar behind the heart */
  content: '';
  position: absolute;
  top: 50%;
  left: -4px;
  right: -4px;
  height: 2px;
  background: var(--lc-gold);
  transform: translateY(-50%);
  z-index: 1;
}

/* Head couple - gold accent */
.tree .couple.head-couple {
  padding: 14px 6px 6px;
  background: linear-gradient(135deg, rgba(253,245,220,0.7) 0%, rgba(255,249,232,0.7) 100%);
  border: 1px dashed var(--lc-gold-soft);
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(212, 160, 23, 0.12);
}
.tree .couple.head-couple .marriage-link {
  color: var(--lc-gold);
}
.tree .couple.head-couple .marriage-link svg {
  filter: drop-shadow(0 1px 2px rgba(212, 160, 23, 0.35));
}

/* "Head of Family" banner above the head's node */
.tree .node.head {
  border-color: var(--lc-gold);
  background: linear-gradient(180deg, #fffcf2 0%, #fff 60%);
}
.tree .couple.head-couple .node.head::before {
  content: '✦ Head of Family';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--lc-gold), #c89512);
  color: var(--lc-navy);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(212, 160, 23, 0.35);
  font-family: 'Inter', sans-serif;
  z-index: 3;
}

.tree .node .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  position: relative;
  margin-top: -2px;
  margin-bottom: 8px;
}
.tree .node .avatar.male {
  background: linear-gradient(135deg, #2a3e7a, #5470b6);
  color: #fff;
}
.tree .node .avatar.female {
  background: linear-gradient(135deg, #a85a5a, #d49494);
  color: #fff;
}
/* (Head marker is now the banner above .node.head — no avatar badge) */

.tree .node .name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--lc-text);
  line-height: 1.2;
}
.tree .node .role {
  display: block;
  font-size: 0.66rem;
  color: var(--lc-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 3px;
}
.tree .node .meta {
  display: block;
  font-size: 0.75rem;
  color: var(--lc-gold);
  font-weight: 600;
  margin-top: 6px;
  padding: 2px 8px;
  background: rgba(212, 160, 23, 0.1);
  border-radius: 999px;
}

/* ----- Transferred state ----- */
.tree .node.transferred {
  background: #fdfaf2;
  opacity: 0.85;
}
.tree .node.transferred .avatar {
  filter: saturate(0.5);
  opacity: 0.85;
}
.tree .node.transferred .status-pill {
  display: block;
  font-size: 0.68rem;
  color: #8a6210;
  background: #fff1d8;
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
  max-width: 180px;
  line-height: 1.3;
}
.tree .node.transferred .status-pill .arrow {
  margin-right: 4px;
}

/* ----- Deceased ("Promoted to Glory") state ----- */
.tree .node.deceased {
  background: linear-gradient(180deg, #f5f2eb 0%, #ebe6d8 100%);
  border-color: #cfc6ad;
  border-style: dashed;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04), inset 0 0 0 1px rgba(255,255,255,0.6);
}
.tree .node.deceased .avatar {
  background: linear-gradient(135deg, #6e6856, #a39c87) !important;
  color: #fff !important;
  filter: grayscale(0.6);
}
.tree .node.deceased .avatar::after {
  content: '✚';
  position: absolute;
  top: -4px;
  right: -6px;
  width: 22px;
  height: 22px;
  background: #2c2c2c;
  color: var(--lc-gold-soft);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.tree .node.deceased .name {
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: #3f3a2c;
  font-size: 1.02rem;
}
.tree .node.deceased .role { color: #8a8170; }
.tree .node.deceased .memorial {
  display: block;
  font-size: 0.7rem;
  color: #4a4232;
  font-style: italic;
  margin-top: 10px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #cfc6ad;
  border-radius: 999px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.tree .node.deceased .memorial::before {
  content: '✚ ';
  color: var(--lc-gold);
  margin-right: 2px;
}

.tree-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 4px 28px 26px;
  color: var(--lc-muted);
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.tree-legend span { display: inline-flex; align-items: center; }
.tree-legend .pip {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.tree-legend .pip.male { background: linear-gradient(135deg, #2a3e7a, #5470b6); }
.tree-legend .pip.female { background: linear-gradient(135deg, #a85a5a, #d49494); }
.tree-legend .pip.head {
  background: var(--lc-gold); color: var(--lc-navy);
  font-size: 0.65rem; display:inline-flex; align-items:center; justify-content:center;
  width: 16px; height: 16px;
}
.tree-legend .pip.transferred {
  background: #fff1d8;
  border-color: #fff1d8;
}
.tree-legend .pip.deceased {
  background: #6e6856;
  font-size: 0.6rem;
  color: var(--lc-gold-soft);
  display:inline-flex; align-items:center; justify-content:center;
  width: 16px; height: 16px;
}

/* ------- Family hero card ------- */
.lc-hero {
  background:
    radial-gradient(circle at top right, rgba(212,160,23,0.08), transparent 50%),
    linear-gradient(135deg, #fff 0%, #fbf7ec 100%);
  border-color: var(--lc-gold-soft) !important;
  position: relative;
  overflow: hidden;
}
.lc-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lc-navy), var(--lc-gold), var(--lc-red));
}
.family-monogram {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lc-navy), var(--lc-navy-soft));
  color: var(--lc-gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  flex-shrink: 0;
  position: relative;
}
.family-monogram::after {
  content: '✦';
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 22px;
  height: 22px;
  background: var(--lc-gold);
  color: var(--lc-navy);
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* ------- Audit trail ------- */
.audit-list { padding: 0; margin: 0; }
.audit-list li {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--lc-border);
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  gap: 16px;
  font-size: 0.9rem;
}
.audit-list li:last-child { border-bottom: none; }
.audit-list .when { color: var(--lc-muted); font-size: 0.85rem; }
.audit-list .who { color: var(--lc-navy); font-weight: 600; }

/* ------- Toast ------- */
.lc-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--lc-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 200;
}
.lc-toast.show { display: flex; }
.lc-toast .ok {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lc-gold); color: var(--lc-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}

/* ------- Login ------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(212,160,23,0.14), transparent 38%),
    radial-gradient(circle at 82% 82%, rgba(26,43,92,0.14), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(185,28,28,0.05), transparent 70%),
    var(--lc-bg);
  position: relative;
  overflow: hidden;
}
.login-wrap::before, .login-wrap::after {
  content: '✚';
  position: absolute;
  color: rgba(212, 160, 23, 0.12);
  font-size: 14rem;
  font-family: Georgia, serif;
  pointer-events: none;
}
.login-wrap::before { top: -3rem; left: -3rem; }
.login-wrap::after { bottom: -3rem; right: -3rem; }

.login-card {
  width: 440px;
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: 20px;
  padding: 44px 40px 36px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(212,160,23,0.08);
  text-align: center;
  position: relative;
  z-index: 1;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 4px;
  background: linear-gradient(90deg, var(--lc-navy), var(--lc-gold), var(--lc-red));
  border-radius: 0 0 4px 4px;
}
.login-card img {
  width: 96px; height: 96px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: block;
  background: #fff;
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.2);
}
.login-card h1 {
  font-size: 1.75rem;
  color: var(--lc-navy);
  margin: 0;
  letter-spacing: 0.3px;
}
.login-card .sub {
  font-size: 0.7rem;
  color: var(--lc-gold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 6px 0 8px;
  font-weight: 600;
}
.login-card .ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 22px;
  color: var(--lc-gold-soft);
  font-size: 0.85rem;
}
.login-card .ornament::before,
.login-card .ornament::after {
  content: '';
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lc-gold-soft), transparent);
}
.login-card form { text-align: left; }
.login-card .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 13px;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}
.login-card .foot {
  margin-top: 22px;
  font-size: 0.78rem;
  color: var(--lc-muted);
}

/* ------- Misc ------- */
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lc-border);
}
.actions-cell { display: flex; gap: 6px; }
.icon-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--lc-border);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--lc-muted);
}
.icon-btn:hover { background: #faf8f1; color: var(--lc-navy); border-color: var(--lc-navy); }
.icon-btn.danger:hover { color: var(--lc-red); border-color: var(--lc-red); }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.stat {
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
}
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--lc-gold), var(--lc-gold-soft));
}
.stat.stat-navy::before { background: linear-gradient(180deg, var(--lc-navy), var(--lc-navy-soft)); }
.stat.stat-red::before { background: linear-gradient(180deg, var(--lc-red), #d75858); }
.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212,160,23,0.15), rgba(212,160,23,0.05));
  color: var(--lc-gold);
  flex-shrink: 0;
}
.stat-icon svg { width: 26px; height: 26px; }
.stat-icon.navy { background: linear-gradient(135deg, rgba(26,43,92,0.12), rgba(26,43,92,0.04)); color: var(--lc-navy); }
.stat-icon.red { background: linear-gradient(135deg, rgba(185,28,28,0.12), rgba(185,28,28,0.04)); color: var(--lc-red); }
.stat .num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  color: var(--lc-navy);
  line-height: 1;
  font-weight: 600;
}
.stat .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--lc-muted);
  margin-top: 4px;
}

.hidden { display: none !important; }

/* ------- Family card grid ------- */
.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 22px;
}
.family-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.family-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--lc-navy), var(--lc-gold), var(--lc-gold-soft));
}
.family-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
  border-color: var(--lc-gold-soft);
}
.family-card .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.family-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--lc-navy);
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  flex: 1;
  letter-spacing: 0.2px;
}
.family-card h3 small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: var(--lc-muted);
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 4px;
}
.family-card .meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}
.family-card .meta-row { display: flex; flex-direction: column; gap: 3px; }
.family-card .lbl {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--lc-muted);
  font-weight: 600;
}
.family-card .val {
  font-size: 0.88rem;
  color: var(--lc-text);
  line-height: 1.3;
}
.family-card .foot {
  border-top: 1px solid var(--lc-border);
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.family-card .view {
  font-size: 0.82rem;
  color: var(--lc-gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.3px;
}
.family-card .foot-actions { display: flex; gap: 4px; }
.family-card.deactivated { opacity: 0.7; background: #faf7ee; }
.family-card.deactivated::before { background: linear-gradient(90deg, #888, #aaa); }

.checkbox-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.92rem; color: var(--lc-text);
  margin-bottom: 8px;
}
.checkbox-line input { accent-color: var(--lc-navy); width: 16px; height: 16px; }

.divider-label {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0;
  color: var(--lc-muted);
  font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.divider-label::before, .divider-label::after {
  content: ""; flex: 1; border-top: 1px solid var(--lc-border);
}