:root {
  --ink: #1f2a24;
  --paper: #faf8f3;
  --line: #d9d3c4;
  --accent: #8a5a3b;
  --ok: #3f6b3a;
  --warn: #a3781f;
  --bad: #9c3b3b;
  font-family: 'Georgia', 'Iowan Old Style', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

.admin-login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: white;
  border: 1px solid var(--line);
  padding: 2.5rem;
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-card h1 {
  margin: 0 0 0.5rem 0;
  font-size: 1.4rem;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.login-card input {
  padding: 0.6rem;
  border: 1px solid var(--line);
  font-size: 1rem;
  font-family: inherit;
}

.login-card button {
  margin-top: 0.5rem;
  padding: 0.7rem;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.error { color: var(--bad); font-size: 0.9rem; }
.panel-hint { color: #6b6455; font-size: 0.85rem; margin: 0 0 0.8rem 0; }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  border-bottom: 1px solid var(--line);
  background: white;
}

.admin-header h1 { font-size: 1.2rem; margin: 0; }

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.signed-in-as {
  font-size: 0.85rem;
  color: #6b6455;
  margin-right: 1rem;
}

main { padding: 1.5rem 2rem; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.admin-table th, .admin-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 0.9rem;
}

.admin-table th { background: #f1ece0; }

.empty { text-align: center; color: #888; padding: 2rem; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  border: 1px solid var(--line);
}

.badge-paid, .badge-sent, .badge-synced { color: var(--ok); border-color: var(--ok); }
.badge-pending { color: var(--warn); border-color: var(--warn); }
.badge-failed { color: var(--bad); border-color: var(--bad); }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.detail-grid section {
  background: white;
  border: 1px solid var(--line);
  padding: 1rem 1.2rem;
}

.detail-grid h2 {
  font-size: 1rem;
  margin: 0 0 0.6rem 0;
  color: var(--accent);
}

dl { margin: 0; }
dt { font-size: 0.75rem; color: #777; margin-top: 0.5rem; }
dd { margin: 0 0 0.2rem 0; }

.photo-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.applicant-photo { width: 140px; height: 140px; object-fit: cover; border: 1px solid var(--line); }

.error-text { color: var(--bad); font-size: 0.8rem; margin-top: 0.2rem; }

.children-list { margin: 0; padding-left: 1.1rem; }
.children-list li { font-size: 0.9rem; margin-bottom: 0.5rem; }
.child-photo { width: 70px; height: 70px; margin-top: 0.3rem; }

.vote-buttons { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.vote-approve, .vote-reject {
  padding: 0.5rem 1.2rem;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: white;
}
.vote-approve { background: var(--ok); }
.vote-reject { background: var(--bad); }
.vote-approve:disabled, .vote-reject:disabled { opacity: 0.5; cursor: not-allowed; }

.preview-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: underline;
}

.edit-main { max-width: 760px; margin: 0 auto; padding: 1.5rem 2rem; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.9rem 1.2rem;
  margin-bottom: 0.6rem;
}
.field-grid label.wide { grid-column: 1 / -1; }

.edit-form label, .photo-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: #3a352c;
}
/* `.edit-form label { display: flex }` above has higher specificity than
   the browser's own `[hidden] { display: none }` default rule, so without
   this it silently wins and a hidden <label> stays visible — exactly the
   bug that showed up in the parent-link toggle above. style.css already
   has the equivalent fix for the public application form; this is the
   same thing for every form on the admin/member side. */
.edit-form label[hidden], .parent-link-block[hidden] { display: none; }
.edit-form label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.edit-form label.checkbox-label input[type="checkbox"] { width: auto; }

.edit-form input, .edit-form select, .edit-form textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.edit-form h2, .edit-form h3 {
  font-size: 1rem;
  color: var(--accent);
  margin: 1.4rem 0 0.6rem 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
}

/* Parent-is-a-member lookup (member dashboard — father/mother linking),
   same idea as the public application form's own version in style.css. */
.parent-link-block { margin-bottom: 0.8rem; }
.edit-form label { position: relative; }
.lookup-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.lookup-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: var(--paper);
  border: none;
  border-bottom: 1px solid var(--line);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.lookup-results button:hover,
.lookup-results button:focus { background: var(--accent); color: #fff; }
.lookup-results p.no-match { margin: 0; padding: 0.5rem 0.7rem; font-size: 0.85rem; color: #777; }
.edit-form button, .photo-edit-form button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.6rem 1.3rem;
  cursor: pointer;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-family: inherit;
}
.child-edit-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--line);
}
.back-button {
  display: inline-block;
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}
.back-button:hover { opacity: 0.9; }

.photos-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.photos-column { display: flex; flex-direction: column; gap: 1rem; }
.photo-card {
  border: 1px solid var(--line);
  padding: 1rem;
  background: #fdfcf9;
}
.photo-card h4 { margin: 0 0 0.6rem 0; font-size: 0.9rem; color: var(--accent); }
.photo-card img.applicant-photo { display: block; margin-bottom: 0.6rem; max-width: 140px; }
.photo-card form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.photo-card form button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .photos-columns { grid-template-columns: 1fr; }
}

.idcard-thumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}
.idcard-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110px;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  font-size: 0.8rem;
}
.idcard-thumb img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 2px solid var(--line);
  margin-bottom: 0.4rem;
}
.idcard-thumb:hover img { border-color: var(--accent); }
.idcard-thumb span { display: block; line-height: 1.2; }
.idcard-thumb-sub { color: #8a8367; font-size: 0.72rem; }

.idcard-thumb-block { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.email-idcard-btn {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.email-idcard-btn:hover { background: var(--accent); color: white; }
.idcard-warning { color: var(--bad, #a33); width: 100%; }

.crop-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* The [hidden] attribute and a plain class both have the same CSS
   specificity, so without this, "display: flex" above wins regardless of
   whether the element is actually hidden — which is exactly what made the
   crop modal appear on every page load instead of only when a photo was
   selected. This rule's higher specificity guarantees hidden always wins. */
.crop-modal[hidden] {
  display: none;
}
.crop-modal-inner {
  background: white;
  padding: 1.5rem;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.crop-modal-inner h3 { margin: 0; color: var(--ink); }
.crop-image-wrap {
  width: min(500px, 80vw);
  height: min(500px, 60vh);
}
.crop-image-wrap img { max-width: 100%; display: block; }
.crop-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.crop-modal-actions button {
  padding: 0.5rem 1.2rem;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}
.crop-modal-actions button:not(.secondary) { background: var(--accent); color: white; }
.crop-modal-actions button.secondary { background: #e5e2d8; color: var(--ink); }
.saved-banner {
  background: #eaf5ea;
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.photo-edit-row { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.photo-edit-form { border: 1px solid var(--line); padding: 1rem; }

.locked-fields-card {
  background: #f0ede4;
  border: 1px solid var(--line);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
}

/* Member dashboard's own-photo header, top of page */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}
.profile-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  flex-shrink: 0;
}
.profile-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0ede4;
  color: #8a8367;
  font-size: 2rem;
  border-style: dashed;
}
.profile-name { margin: 0; font-size: 1.3rem; color: var(--ink); }

.roles-summary {
  display: flex;
  gap: 2rem;
  padding: 1.2rem 2rem;
  background: #f7f5f0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.roles-summary h2 { font-size: 0.95rem; color: var(--accent); margin: 0 0 0.4rem 0; border: none; }
.roles-summary ul { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }

.function-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 2rem 0;
}
.function-tab {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  border-bottom: none;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  background: #f0ede4;
}
.function-tab.active {
  background: white;
  border-bottom: 2px solid white;
  margin-bottom: -1px;
  font-weight: bold;
  color: var(--accent);
}

.summary-button {
  display: inline-block;
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 0.6rem 1.3rem;
  font-size: 0.9rem;
  font-weight: bold;
  margin-right: 0.6rem;
}
.summary-button:hover { opacity: 0.9; }

/* Committee & roles page */
.committee-card { background: #fff; border: 1px solid #e0dccf; border-radius: 6px; padding: 1rem 1.2rem; margin: 1rem 0; }
.committee-card h2 { font-size: 1rem; margin: 0 0 0.7rem 0; color: var(--accent); }
.committee-add, .committee-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.committee-row { padding: 0.6rem 0; border-top: 1px solid #eee9db; }
.committee-row:first-of-type { border-top: none; }
.committee-add input[type=text], .committee-add input[type=email], .committee-row input[type=text] {
  padding: 0.45rem 0.6rem; border: 1px solid #cfc9b8; border-radius: 4px; font: inherit; min-width: 190px;
}
.committee-email { color: #6b6455; font-size: 0.9rem; min-width: 220px; }
.committee-card label { font-size: 0.88rem; white-space: nowrap; }
.primary-btn, .danger-btn { border: none; border-radius: 4px; padding: 0.45rem 0.9rem; font: inherit; cursor: pointer; color: #fff; background: var(--accent); }
.danger-btn { background: #9b3b2f; }
.notice-ok { background: #e6f2e4; border: 1px solid #b9d9b4; padding: 0.5rem 0.8rem; border-radius: 4px; }
.notice-err { background: #fbe9e6; border: 1px solid #e3b4ab; padding: 0.5rem 0.8rem; border-radius: 4px; }

/* Find & export filter tab */
.filter-form { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: end; padding: 1rem 2rem; background: #fff; border-bottom: 1px solid #e0dccf; }
.filter-form label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.25rem; }
.filter-form input[type=text] { padding: 0.45rem 0.6rem; border: 1px solid #cfc9b8; border-radius: 4px; font: inherit; min-width: 160px; }

/* Welcome-email editor, activity dashboard, signed-in label */
.et-label { display: block; font-weight: 600; margin: 0.8rem 0 0.3rem; font-size: 0.9rem; }
.et-subject { width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border: 1px solid #cfc9b8; border-radius: 4px; font: inherit; }
.et-toolbar { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.et-toolbar button { border: 1px solid #cfc9b8; background: #f6f3ea; border-radius: 4px; padding: 0.3rem 0.7rem; cursor: pointer; font: inherit; }
.et-editor { min-height: 340px; border: 1px solid #cfc9b8; border-radius: 4px; background: #fff; padding: 0.8rem 1rem; line-height: 1.5; }
.et-editor:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.et-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.7rem; }
.et-chip { border: 1px solid var(--accent); color: var(--accent); background: #fff; border-radius: 999px; padding: 0.2rem 0.7rem; cursor: pointer; font: inherit; font-size: 0.82rem; }
.et-actions { margin-top: 1rem; display: flex; gap: 0.6rem; }
.secondary-btn { border: 1px solid #cfc9b8; border-radius: 4px; padding: 0.45rem 0.9rem; font: inherit; cursor: pointer; background: #e5e2d8; color: var(--ink); }
.et-preview { margin-top: 1rem; border: 1px dashed #cfc9b8; border-radius: 4px; padding: 0.8rem 1rem; background: #fffdf7; }
.et-preview[hidden] { display: none; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.stat { background: #fff; border: 1px solid #e0dccf; border-radius: 6px; padding: 0.8rem 1rem; }
.stat-n { font-size: 1.7rem; color: var(--accent); font-weight: 700; }
.stat-l { font-size: 0.82rem; color: #6b6455; }
.signed-in-as { margin-right: 0.9rem; font-size: 0.88rem; }
.count-chips { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.8rem 0; }
.count-chip { background: #fff; border: 1px solid #e0dccf; border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.9rem; }
.count-chip strong { color: var(--accent); }

/* Member list thumbnails */
.member-thumb { display: block; width: 40px; height: 50px; object-fit: cover; border-radius: 4px; border: 1px solid #e0dccf; background: #f1ece0; }
.member-thumb-empty { background: repeating-linear-gradient(45deg, #f1ece0, #f1ece0 6px, #e9e3d3 6px, #e9e3d3 12px); }