/* ===== Base ===== */
.mcb-members { max-width: 980px; margin: 2rem auto; padding: 0 1rem; }
h1,h2,h3 { color:#0a2466; margin:0 0 .6rem; font-weight:700; }
a { color:#0a2466; text-decoration:none; }
a:hover { text-decoration:underline; }
.mcb-muted { color:#6b7280; font-size:.9em; }

/* Buttons */
.btn { display:inline-block; padding:8px 14px; border-radius:8px; font-weight:600; border:1px solid transparent; cursor:pointer; text-decoration:none; }
.btn-navy { background:#0a2466; color:#fff; border-color:#0a2466; }
.btn-ghost-navy { background:#fff; color:#0a2466; border-color:#0a2466; }
.btn-sm { padding:6px 10px; border-radius:6px; font-size:.9rem; line-height:1.1; }

/* Inputs */
input[type=text], input[type=email], input[type=password], select, textarea {
  width:100%; box-sizing:border-box; font:inherit;
  border:1px solid #d1d5db; border-radius:8px; padding:10px 12px;
}
textarea { min-height:120px; resize:vertical; }

/* Cards */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,.03); margin-bottom:1.25rem; }

/* Admin layout (wider) */
.mcb-admin { max-width: 1200px; padding: 0 1.25rem; }

/* Grid helpers */
.mcb-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Tables */
.mcb-table { width:100%; border-collapse:collapse; }
.mcb-table th, .mcb-table td { border:1px solid #e5e7eb; padding:14px 16px; vertical-align:middle; }
.mcb-table th { background:#f8fafc; font-weight:700; text-align:left; }
.mcb-table tr:nth-child(even) td { background:#fafafa; }

/* Actions column – inline, tidy */
.actions-inline { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.actions-inline select { height:34px; padding:4px 8px; font-size:.95rem; }
.actions-inline .btn { margin-left:.1rem; }

/* Responsive */
@media (max-width: 900px) {
  .mcb-admin { max-width:100%; padding:0 1rem; }
  .mcb-row-2 { grid-template-columns:1fr; }
  .actions-inline { gap:.4rem; }
  .mcb-table th, .mcb-table td { padding:10px; }
}

/* Add margin under the Create user button */
.mcb-table {
  margin-top: 1.5rem; /* pushes table down */
}

/* Add consistent spacing between action buttons */
.actions-inline .btn {
  margin: 0.25rem 0.25rem; /* about 1–2% visually */
}


/* --- Mobile-first improvements --- */

/* Space under Create user */
.mcb-table { margin-top: 1rem; }

/* Touch sizing */
@media (max-width: 680px) {
  .mcb-admin { padding: 0 .75rem; }
  .card { padding: .75rem; border-radius: 10px; }
  input[type="text"], input[type="email"], input[type="password"], select, textarea {
    font-size: 16px; /* prevent iOS zoom */
    padding: 10px 12px;
  }
  .btn { width: 100%; text-align: center; }

  /* Add User form goes one column */
  .mcb-row-2 { grid-template-columns: 1fr; gap: .75rem; }

  /* Table becomes stacked cards */
  .mcb-table, .mcb-table thead, .mcb-table tbody, .mcb-table tr, .mcb-table th, .mcb-table td {
    display: block;
    width: 100%;
  }
  .mcb-table thead { display: none; }
  .mcb-table tr {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: .75rem;
  }
  .mcb-table td {
    border: 0;
    padding: 8px 0;
  }
  /* Show the column name before the value */
  .mcb-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #475569;
    margin-bottom: 2px;
  }

  /* Actions area: wrap to two columns neatly */
  .actions-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .actions-inline select,
  .actions-inline .btn {
    width: 100%;
  }
}

/* Tablet polish */
@media (min-width: 681px) and (max-width: 1024px) {
  .actions-inline { flex-wrap: wrap; gap: .4rem; }
  .actions-inline select { height: 36px; }
  .actions-inline .btn { padding: 7px 12px; }
}

/* RSVP block layout */
.rsvp-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 16px;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  padding: .75rem 0;
}
.rsvp-meta { min-width: 0; }
.rsvp-choices { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.rsvp-radios label { margin-right: 14px; }

/* Mobile: stack + use dropdown instead of radios */
@media (max-width: 680px) {
  .rsvp-item { grid-template-columns: 1fr; }
  .rsvp-radios { display: none; }
  .rsvp-select { display: block; width: 100%; }
}

/* Desktop/tablet: show radios, hide dropdown */
@media (min-width: 681px) {
  .rsvp-select { display: none; }
}

/* Make the profile form feel roomier on mobile */
@media (max-width: 680px) {
  .mcb-admin { padding: 0 .75rem; }
  .card { border-radius: 12px; }
  .mcb-row-2 { grid-template-columns: 1fr; gap: .75rem; }
}

/* dues badge pills */
.badge {
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-weight:700; font-size:.9rem; line-height:1; border:1px solid transparent;
}
.badge-success { background:#e8f7ef; color:#166534; border-color:#bbebcf; } /* green */
.badge-info    { background:#eef6ff; color:#0a2472; border-color:#cfe5ff; } /* navy-ish */
.badge-warn    { background:#fff4ea; color:#9a3412; border-color:#ffd9ba; } /* orange */


.btn {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}

.btn-primary {
  background: #1f4fff; /* brand blue */
  color: #fff;
}

.btn-primary:hover {
  background: #173bcc;
}

/* Admin grid/table helpers */
.mcb-admin .card { border-radius: 14px; }
.mcb-admin .btn { border-radius: 10px; }
.mcb-admin .btn-sm { padding: 6px 10px; font-size: .95rem; }

/* Soft background on the admin area if your theme allows */
.mcb-admin main, .admin-wrap { /* nothing critical here—your site theme likely handles bg */ }

/* Mobile-friendly table treatment (if you use .mcb-table elsewhere) */
@media (max-width: 760px) {
  .mcb-table thead { display: none; }
  .mcb-table tr { display: block; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
  .mcb-table td { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 6px 0; }
  .mcb-table td::before { content: attr(data-label); color: #6b7280; }
}