/* ── MIND brand palette ───────────────────────────────────────────────────── */
:root {
  --mind-green:        #9DCE74;   /* primary brand green */
  --mind-green-dark:   #7ab84e;   /* hover / border tint */
  --mind-green-deeper: #3a7010;   /* deep green for buttons (white text readable) */
  --mind-green-light:  #eef8e4;   /* very light tint for family blocks */
  --mind-red:          #c41230;   /* accent red matching the MIND logo */
  --mind-text-on-green:#1a3308;   /* dark text for use ON the green background */
  --mind-border:       #b5dc93;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  background-color: #f5f9f2;
  color: #212529;
}

/* ── Hero header ──────────────────────────────────────────────────────────── */
.mind-hero {
  background-color: var(--mind-green);
  padding: 0;
  border-bottom: 3px solid var(--mind-green-dark);
}

.mind-hero-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.25rem 1.5rem;
}

.mind-hero-logo {
  height: 110px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.mind-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mind-hero-title {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--mind-red);
  margin: 0 0 .25rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.mind-hero-sub {
  font-size: clamp(.85rem, 1.5vw, 1.05rem);
  color: var(--mind-text-on-green);
  margin: 0;
  font-style: italic;
  font-weight: 500;
}

/* ── Slim nav strip below hero ────────────────────────────────────────────── */
.mind-navbar {
  background-color: var(--mind-green-deeper) !important;
  padding: .35rem 0;
  min-height: unset;
}

/* ── Section cards ────────────────────────────────────────────────────────── */
.section-card {
  border: 1px solid var(--mind-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.section-header {
  background-color: var(--mind-green) !important;
  color: var(--mind-text-on-green) !important;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .95rem;
  padding: .75rem 1.25rem;
  border-bottom: 2px solid var(--mind-green-dark) !important;
}

/* ── Question labels ──────────────────────────────────────────────────────── */
.q-label {
  font-weight: 600;
  color: #1a1a1a;
  font-size: .93rem;
}

/* ── Family member blocks ─────────────────────────────────────────────────── */
.family-member-block {
  background-color: var(--mind-green-light);
  border: 1px solid var(--mind-border);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-mind {
  background-color: var(--mind-green-deeper);
  border-color: var(--mind-green-deeper);
  color: #fff;
  font-weight: 600;
  letter-spacing: .03em;
}

.btn-mind:hover,
.btn-mind:focus {
  background-color: #2c5a0b;
  border-color: #2c5a0b;
  color: #fff;
}

/* ── Form controls ────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--mind-green-dark);
  box-shadow: 0 0 0 .2rem rgba(157,206,116,.35);
}

/* ── Admin table ──────────────────────────────────────────────────────────── */
.mind-thead th {
  background-color: var(--mind-green);
  color: var(--mind-text-on-green);
  white-space: nowrap;
  vertical-align: middle;
  padding: .55rem .75rem;
}

.mind-thead th a {
  color: var(--mind-text-on-green) !important;
}

.mind-thead th a:hover {
  color: var(--mind-red) !important;
}

.sort-arrow {
  font-size: .75rem;
}

/* ── Grade badges ─────────────────────────────────────────────────────────── */
.grade-badge {
  background-color: var(--mind-green-deeper);
  color: #fff;
  font-size: .8rem;
  padding: .3em .55em;
}

/* ── Admin detail ─────────────────────────────────────────────────────────── */
.admin-detail-label {
  color: #6c757d;
  font-size: .85rem;
  font-weight: 600;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.mind-footer {
  background-color: var(--mind-green);
  color: var(--mind-text-on-green);
  border-top: 3px solid var(--mind-green-dark);
}

/* ── Responsive hero ──────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .mind-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
  }

  .mind-hero-logo {
    height: 80px;
  }
}