:root{
  --brand-1: #0a7a57;
  --brand-2: #046642;
  --muted: #6b7280;
  --surface: #ffffff;
  --bg: #f7fafc;
  --max-width: 1100px;
}
/* Global container to center page content */
body{
  background: var(--bg);
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica', Arial, sans-serif;
  line-height:1.4;
}
.site-container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px;
}

/* Top header/nav injected by JS */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: linear-gradient(90deg, rgba(10,122,87,0.06), rgba(4,102,66,0.02));
  padding:12px 18px;
  border-bottom:1px solid rgba(15,23,42,0.04);
}
.site-brand{ display:flex; align-items:center; gap:12px }
.site-brand h1{ font-size:18px; margin:0 }
.site-nav{ display:flex; gap:10px; align-items:center }
.site-nav a{ color:var(--brand-1); text-decoration:none; padding:8px 10px; border-radius:8px; font-weight:600 }
.site-nav a:hover, .site-nav a[aria-current="page"]{ background:rgba(10,122,87,0.1) }
.site-actions{ display:flex; gap:8px; align-items:center }
.site-actions .btn{ padding:8px 12px; border-radius:8px; cursor:pointer; border:0 }
.btn-primary{ background:var(--brand-1); color:#fff }
.btn-secondary{ background:#fff; color:var(--brand-1); border:1px solid rgba(10,122,87,0.12) }

/* Skip link for keyboard users */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:8px; top:8px; width:auto; height:auto; padding:8px 12px; background:#fff; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.12); z-index:9999 }

/* Simple responsive adjustments so header wraps on small screens */
@media (max-width:720px){
  .site-header{ flex-direction:column; align-items:flex-start }
  .site-nav{ flex-wrap:wrap }
}

/* Slightly increase tappable area for links and inputs globally */
a, button, input, select, textarea{ -webkit-tap-highlight-color: transparent }

/* Helper utility to center primary page content */
.page-main{ padding:18px 0 }

/* Improve visible focus states for accessibility */
*:focus{ outline: 3px solid rgba(10,122,87,0.12); outline-offset:2px }

/* Hide legacy group-sidebar navigation to avoid duplicate link lists
  The top header provides a single global navigation. This only hides
  the visual sidebar; no backend or HTML is changed. */
.group-sidebar{ display: none !important }

/* If you prefer to keep the sidebar on large screens, remove the rule above
  or change it to `display:block` within a media query. */

/* Planner two-column layout: side-by-side on wide screens, stacked on mobile */
.planner-columns {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 8px;
}
.planner-panel {
  flex: 1 1 0;
  min-width: 280px;
}
.planner-panel .planner-table { margin-bottom: 12px }

@media (max-width:960px) {
  .planner-columns { flex-direction: column; gap: 18px }
}

/* Members two-column layout */
.members-columns {
  display:flex;
  gap:28px;
  align-items:flex-start;
}
.members-panel { flex:1 1 0 }
.members-panel--left { max-width:360px }
.members-panel--right { flex:1 1 0 }

@media (max-width:960px) {
  .members-columns { flex-direction:column }
}

/* Make member overview cards/tables visually consistent in the right panel */
.members-panel--right .cards-row {
  display: grid;
  /* increase min card width so tables have more horizontal room */
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 18px;
}
.members-panel--right .event-card {
  display: flex;
  flex-direction: column;
  min-height: 200px; /* ensure consistent card height */
}
.members-panel--right .event-card .member-table {
  /* Make the table fill the card width. Use automatic table layout so
     columns can distribute space naturally and the table expands to the
     available card width. Keep single-line rows where possible and allow
     horizontal scrolling if content cannot fit. */
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  overflow-x: auto;
}
.members-panel--right .event-card .member-table th,
.members-panel--right .event-card .member-table td {
  /* Keep content on one line where possible, but avoid clipping with
     ellipsis so values can occupy the full available width of the cell.
     Allow visible overflow so horizontal scrolling works when needed. */
  white-space: nowrap;
  padding: 10px 12px;
  text-overflow: clip;
  overflow: visible;
}
/* sensible column widths: name, email, phone (preferred proportions) */
.members-panel--right .event-card .member-table th:first-child,
.members-panel--right .event-card .member-table td:first-child { width: 25% }
.members-panel--right .event-card .member-table th:nth-child(2),
.members-panel--right .event-card .member-table td:nth-child(2) { width: 55% }
.members-panel--right .event-card .member-table th:nth-child(3),
.members-panel--right .event-card .member-table td:nth-child(3) { width: 20% }

/* Override older rules that force a small max-width on the first column
   (defined in other styles). Allow the name column to expand to fill
   remaining space so long names don't get truncated with dots. */
.members-panel--right .event-card .member-table td:nth-child(1) {
  max-width: none !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}