/* ============================================================
   Joe's Harbor — family dashboard
   ============================================================ */

.admin-body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(185, 210, 232, 0.55) 0%, rgba(185, 210, 232, 0) 55%),
    var(--paper);
  min-height: 100vh;
}

/* ---------- sign-in gate ---------- */

.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.gate-card {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 44px 38px 30px;
  text-align: center;
  animation: rise-in 0.9s ease-out both;
}

.gate-duck { width: 64px; margin: 0 auto 14px; animation: bob 6s ease-in-out infinite; }

.gate-card h1 { font-size: 2.2rem; margin-bottom: 6px; }
.gate-sub { color: var(--ink-soft); font-size: 0.97rem; font-style: italic; margin-bottom: 26px; }

#gate-key {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
#gate-key:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185, 141, 79, 0.18);
}

.gate-back { margin-top: 22px; font-size: 0.9rem; }
.gate-back a { color: var(--ink-faint); text-decoration: none; }
.gate-back a:hover { color: var(--gold); }

/* ---------- dashboard chrome ---------- */

.dash { max-width: 880px; margin: 0 auto; padding: 40px 22px 80px; }

.dash-header {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}

.dash-title h1 { font-size: 2rem; }
.dash-title h1 span { color: var(--ink-faint); font-weight: 500; font-size: 0.65em; }
.dash-title p { color: var(--ink-soft); font-style: italic; font-size: 0.95rem; }

.dash-actions { display: flex; gap: 10px; }
.btn-small { padding: 9px 18px; font-size: 0.92rem; }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.tab {
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 10px 16px 12px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--gold); font-weight: 600; }

.count {
  display: inline-block;
  min-width: 24px;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.tab.active .count { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }

/* ---------- queue cards ---------- */

.queue { display: flex; flex-direction: column; gap: 18px; }

.review-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold-soft);
  border-radius: 12px;
  padding: 22px 24px 18px;
  box-shadow: 0 10px 26px -18px rgba(43, 58, 82, 0.3);
  animation: rise-in 0.5s ease-out both;
}
.review-card.pending  { border-left-color: var(--gold); }
.review-card.approved { border-left-color: #7fa88a; }
.review-card.declined { border-left-color: var(--ink-faint); opacity: 0.85; }

.review-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.review-who { font-weight: 600; }
.review-loc { color: var(--ink-soft); font-style: italic; font-weight: 400; }
.review-loc::before { content: " · 🦆 "; font-style: normal; }
.review-when { color: var(--ink-faint); font-size: 0.88rem; }

.review-message {
  font-size: 1.05rem;
  color: var(--ink);
  white-space: pre-line;
  margin-bottom: 16px;
}

.review-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.act {
  font-family: inherit;
  font-size: 0.93rem;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.act:disabled { opacity: 0.5; cursor: wait; }

.act-approve {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: #fffdf6;
  box-shadow: 0 8px 20px -10px rgba(185, 141, 79, 0.65);
}
.act-approve:hover { transform: translateY(-1px); }

.act-decline {
  background: transparent;
  border-color: var(--hairline);
  color: var(--ink-soft);
}
.act-decline:hover { border-color: #a04545; color: #a04545; }

.act-remove {
  background: transparent;
  border-color: rgba(160, 69, 69, 0.45);
  color: #a04545;
}
.act-remove:hover { border-color: #a04545; background: rgba(160, 69, 69, 0.07); }
.act-remove.armed {
  background: #a04545;
  border-color: #a04545;
  color: #fffdf6;
  box-shadow: 0 8px 20px -10px rgba(160, 69, 69, 0.7);
}

.act-restore {
  background: transparent;
  border-color: var(--hairline);
  color: var(--ink-soft);
}
.act-restore:hover { border-color: var(--gold); color: var(--gold); }

.queue-empty {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  padding: 60px 0;
}

/* ---------- housekeeping ---------- */

.dash-foot { margin-top: 50px; }

.dash-foot details {
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 20px;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.dash-foot summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.dash-foot ul { margin: 12px 0 4px 22px; }
.dash-foot li { margin-bottom: 6px; }
.dash-foot code {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.86em;
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .dash { padding: 26px 14px 60px; }
  .dash-title h1 { font-size: 1.55rem; }
  .dash-actions { width: 100%; }
  .dash-actions .btn { flex: 1; text-align: center; }
  .tab { padding: 8px 10px 10px; font-size: 0.9rem; }
  .review-card { padding: 18px 16px 14px; }
  .review-actions .act { flex: 1; }
  .gate-card { padding: 34px 22px 24px; }
}