/* Extract CSS from Stylesheet.html (line 2 onwards, without <style> tags) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  /* Soft outdoors theme with mountains and sky */
  background: linear-gradient(to bottom, 
    #87CEEB 0%,      /* Sky blue */
    #B0D4E3 30%,     /* Light sky */
    #D4E7ED 50%,     /* Horizon */
    #90C695 70%,     /* Forest green */
    #6B8E6F 100%     /* Dark forest */
  );
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
  padding: 20px;
  color: #333;
}

/* Mountain silhouette overlay */
body::before {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: 
    /* Front mountains */
    radial-gradient(ellipse at 20% 100%, #5a7c5e 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, #4a6b4f 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, #3d5a40 0%, transparent 60%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* Subtle texture overlay */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px);
  pointer-events: none;
  z-index: 0;
}

/* Lift page content above body::before / body::after pseudo-element overlays (z-index:0).
   Explicitly exclude Bootstrap modal/backdrop elements AND mobile-menu elements that are
   appended to <body> at runtime — those must stay position:fixed with their own z-index intact. */
body > *:not(.modal):not(.modal-backdrop):not(.modal-open):not(.mobile-menu):not(.mobile-menu-overlay):not(.mobile-menu-btn) {
  position: relative;
}

/* Belt-and-suspenders: guarantee Bootstrap modal stacking is never overridden */
.modal           { position: fixed !important; z-index: 1055 !important; }
.modal-backdrop  { position: fixed !important; z-index: 1050 !important; }

/* Mobile-friendly input sizing */
input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea,
button {
  font-size: 16px;
  touch-action: manipulation;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header {
  background: linear-gradient(to bottom, 
    #2c5f2d 0%,      /* Dark forest green */
    #3d7c3e 50%,     /* Forest green */
    #4a8c4b 100%     /* Lighter green */
  );
  color: white;
  padding: 40px 30px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

/* Subtle user action buttons inside the header banner */
.header-user-actions {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}
.header-role-badge {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.header-action-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.header-action-btn:hover {
  background: rgba(255,255,255,0.28);
  color: #fff;
  text-decoration: none;
}

/* Slim admin topbar (replaces old green navbar on admin.html) */
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 1.5rem;
}

/* ── Profile Dropdown Menu (profile-menu.js) ───────────────────── */
.profile-menu-slot {
  display: inline-flex;
  align-items: center;
}

/* Positioning slot for green header (back-link pages, index.html) */
.header-profile-slot {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
}

.pm-wrapper {
  position: relative;
  display: inline-flex;
}

/* Default: white-on-dark for the green header banner */
.pm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  padding: 4px 11px 4px 8px;
  color: #fff;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  font-family: inherit;
}
.pm-btn:hover { background: rgba(255,255,255,0.28); }

.pm-person-icon { font-size: 1.1rem; }
.pm-first-name  { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.pm-caret       { font-size: 0.6rem; opacity: 0.7; transition: transform 0.15s; }

/* Light topbar variant (admin.html) */
.admin-topbar .pm-btn {
  background: transparent;
  border-color: #dee2e6;
  color: #374151;
}
.admin-topbar .pm-btn:hover { background: #f3f4f6; }

/* Dark topbar variant (global-admin.html uses .ga-topbar) */
.ga-topbar .pm-btn {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.ga-topbar .pm-btn:hover { background: rgba(255,255,255,0.22); }

/* Dropdown panel — position:fixed so it escapes overflow:hidden headers */
.pm-dropdown {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  padding: 4px 0;
  list-style: none;
  margin: 0;
  z-index: 9999;
}
.pm-dropdown.pm-open { display: block; }

.pm-header         { padding: 10px 14px 8px; }
.pm-display-name   { font-weight: 600; font-size: 0.88rem; color: #111827; }
.pm-role-label     { font-size: 0.73rem; color: #6b7280; margin-top: 2px; }

.pm-divider        { border-top: 1px solid #f0f0f0; margin: 3px 0; }

.pm-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  color: #374151;
  text-decoration: none;
  font-size: 0.87rem;
  transition: background 0.1s;
}
.pm-item:hover     { background: #f9fafb; color: #111827; text-decoration: none; }
.pm-icon           { font-size: 0.9rem; width: 16px; text-align: center; flex-shrink: 0; }
.pm-signout        { color: #dc2626 !important; }
.pm-signout:hover  { background: #fff5f5 !important; }

/* Pine tree pattern in background */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Tree silhouettes using triangles */
    linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.15) 55%, transparent 55%),
    linear-gradient(45deg, transparent 45%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.15) 55%, transparent 55%);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}

/* Additional pine tree silhouettes */
.header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: 
    /* Stylized pine trees at bottom */
    radial-gradient(ellipse at 10% 100%, rgba(20, 40, 20, 0.4) 0%, transparent 30%),
    radial-gradient(ellipse at 30% 100%, rgba(20, 40, 20, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(20, 40, 20, 0.3) 0%, transparent 35%),
    radial-gradient(ellipse at 70% 100%, rgba(20, 40, 20, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 100%, rgba(20, 40, 20, 0.4) 0%, transparent 30%);
  background-size: 80px 100%, 60px 100%, 90px 100%, 70px 100%, 85px 100%;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 1;
}

.pack-logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.pack-logo img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  background: white;
  padding: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  display: block;
}

.header h1 {
  font-size: 2.2em;
  margin: 0 0 5px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
  font-weight: 700;
}

.subtitle {
  font-size: 1.15em;
  opacity: 0.95;
  font-weight: 300;
  position: relative;
  z-index: 2;
  margin: 0;
  display: block;
}

/* Header content wrapper */
.header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  z-index: 2;
}

/* Responsive header layout */
@media (max-width: 768px) {
  /* Compact header strip — prevents large banner pushing content off screen */
  .header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 60px 10px 16px; /* right room for hamburger FAB */
    min-height: auto;
  }

  /* Pull back-link into flex flow so it doesn't overlap header content */
  .back-link {
    position: static;
    order: -1;
    font-size: 0.78em;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    transform: none;
    top: auto;
    left: auto;
  }

  .header-content {
    align-items: flex-start;
    text-align: left;
  }

  .header h1 {
    font-size: 1.1em;
    margin: 0;
    /* Keep the title on one line. A wrapped unit name dropped its last word
       onto a second row beside the floating menu button -- "Pack 685 - DEV
       Check-" over an orphaned "In" -- which read as a layout break rather
       than a long name. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .header-content {
    min-width: 0; /* let the title ellipsis rather than force the flex row wider */
  }

  /* Hide elements redundant on mobile — navigation handles these */
  .subtitle { display: none; }
  .header-profile-slot { display: none; }

  .pack-logo img {
    max-width: 44px;
    max-height: 44px;
    padding: 4px;
  }
}

.back-link {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  text-decoration: none;
  font-size: 1em;
  padding: 8px 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  transition: background 0.3s;
}

.back-link:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Menu Grid */
.menu-section {
  padding: 0 30px 25px 30px;
}

.menu-section:first-child {
  padding-top: 25px;
}

.menu-section:last-child {
  padding-bottom: 30px;
}

.section-heading {
  color: #2c5f2d;
  font-size: 1.5em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid #6B8E6F;
  font-weight: 600;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.menu-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #e3e8ed;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  text-decoration: none;
  color: #333;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(44, 95, 45, 0.2);
  border-color: #3d7c3e;
  background: white;
}

.menu-icon {
  font-size: 3.5em;
  margin-bottom: 12px;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.menu-card h3 {
  color: #2c5f2d;
  margin-bottom: 10px;
  font-size: 1.35em;
  font-weight: 600;
}

.menu-card p {
  color: #6c757d;
  font-size: 0.95em;
  line-height: 1.4;
}

/* Forms */
.form-section {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  font-family: inherit;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.form-group textarea {
  resize: vertical;
}

/* Radio Buttons */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-label {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: normal;
}

.radio-label:hover {
  background: #e9ecef;
  border-color: #667eea;
}

.radio-label input[type="radio"] {
  margin-right: 10px;
  width: auto;
  cursor: pointer;
}

.radio-label:has(input[type="radio"]:checked) {
  background: #e7f0ff;
  border-color: #667eea;
}

/* Buttons */
.btn {
  padding: 14px 28px;
  border: none;
  border-radius: 10px;
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, #2c5f2d 0%, #3d7c3e 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(44, 95, 45, 0.3);
  background: linear-gradient(135deg, #1f4520 0%, #2c5f2d 100%);
}

.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(108, 117, 125, 0.3);
}

.btn-remove {
  background: #ff4444;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
}

.btn-remove:hover {
  background: #cc0000;
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  justify-content: flex-end;
}

/* Member Items */
.member-item {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 2px solid #e0e0e0;
}

.member-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.member-header h4 {
  color: #667eea;
}

/* Messages */
.message {
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  text-align: center;
  font-weight: 500;
}

.message.success {
  background: #d4edda;
  color: #155724;
  border: 2px solid #c3e6cb;
}

.message.error {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
}

/* Search Results */
.results-list {
  margin-top: 20px;
}

.result-item {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.result-item:hover {
  border-color: #667eea;
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.result-item h4 {
  color: #667eea;
  margin-bottom: 10px;
}

.result-item p {
  margin: 5px 0;
  color: #666;
}

/* Checkboxes */
.checkbox-item {
  padding: 15px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.checkbox-item:hover {
  border-color: #667eea;
  background: #f8f9fa;
}

.checkbox-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  cursor: pointer;
}

.checkbox-item label {
  cursor: pointer;
  flex: 1;
  margin: 0;
}

/* Info Box */
.info-box {
  background: #e3f2fd;
  border: 2px solid #90caf9;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.info-box h4 {
  color: #1976d2;
  margin-bottom: 10px;
}

/* Info Section */
.info-section {
  padding: 0 20px 20px 20px;
}

.info-section .card {
  border-radius: 16px;
}

.info-section .card-title {
  color: #2c5f2d;
  font-weight: 600;
  font-size: 1.25rem;
}

.info-section ol {
  padding-left: 1.5rem;
  line-height: 1.8;
}

.info-section ol li {
  margin-bottom: 8px;
  color: #495057;
}

/* Dashboard */
.dashboard-section {
  padding: 30px;
}

.stats-list {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 1.1em;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row .stat-label {
  font-weight: 600;
  color: #333;
}

.stat-row .stat-value {
  font-weight: bold;
  color: #667eea;
  font-size: 1.2em;
}

.actions-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  justify-content: center;
}

/* Attendance Table */
.attendance-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.attendance-table thead {
  background: linear-gradient(135deg, #2c5f2d 0%, #3d7c3e 100%);
  color: white;
}

.attendance-table th,
.attendance-table td {
  padding: 15px;
  text-align: left;
}

.attendance-table tbody tr {
  border-bottom: 1px solid #e0e0e0;
}

.attendance-table tbody tr:hover {
  background: #f8f9fa;
}

.attendance-table tbody tr:last-child {
  border-bottom: none;
}

/* Help Text */
.help-text {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
  font-style: italic;
}

.small-text {
  font-size: 0.85em;
  color: #666;
}

/* Current Event Banner */
.current-event-banner {
  background: linear-gradient(135deg, #2c5f2d 0%, #3d7c3e 100%);
  color: white;
  padding: 18px 24px;
  border-radius: 12px;
  margin: 20px 20px 25px 20px;
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
  position: relative;
  overflow: hidden;
}

/* Subtle tree pattern in event banner */
.current-event-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.08) 55%, transparent 55%),
    linear-gradient(45deg, transparent 45%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.08) 55%, transparent 55%);
  background-size: 30px 30px, 30px 30px;
  background-position: 0 0, 15px 15px;
  opacity: 0.4;
  pointer-events: none;
}

/* The banner is a three-part flex row: details toggle, event name, change
   button.
   On a phone the global `.btn { width: 100% }` applied here too, so both
   buttons asked for the full banner width, the flex row squeezed all three
   items, and the centred event name ended up rendering underneath the change
   button. Full-width is right for a form button and wrong for an icon button
   sharing a row, so the two here opt out and size to their content. */
.current-event-banner > .btn {
  flex: 0 0 auto;
  width: auto;
  position: relative;
  z-index: 1;
}

.current-event-banner > .flex-grow-1 {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .current-event-banner {
    padding: 12px 10px;
    margin: 14px 10px 18px 10px;
    font-size: 1rem;
    gap: 6px;
  }
}

.current-event-banner strong {
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.current-event-banner span {
  position: relative;
  z-index: 1;
}

.current-event-banner .btn-light {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 8px;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.current-event-banner .btn-light:hover {
  background: white;
  transform: scale(1.05);
}

/* Leadership Page */
.leadership-card {
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  text-align: center;
  transition: all 0.3s;
}

.leadership-card:hover {
  border-color: #667eea;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.leadership-icon {
  font-size: 3em;
  margin-bottom: 10px;
}

.leadership-card h3 {
  color: #667eea;
  font-size: 1.5em;
  margin-bottom: 15px;
}

.leader-name {
  font-size: 1.2em;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.contact-item {
  margin: 10px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  text-align: left;
}

.contact-label {
  font-weight: 600;
  color: #667eea;
  margin-right: 8px;
}

.contact-link {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.contact-link:hover {
  color: #667eea;
  text-decoration: underline;
}

/* Footer */
.footer {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 20px 30px;
  text-align: center;
  border-top: 3px solid #6B8E6F;
  margin-top: 30px;
}

.footer-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.footer-menu a {
  color: #2c5f2d;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 0.95rem;
}

.footer-menu a:hover {
  background: #e0f2e9;
  color: #1a4d1f;
  transform: translateY(-1px);
}

.footer-divider {
  color: #6c757d;
  font-weight: 300;
}

.footer-text {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.footer p {
  margin: 6px 0;
  color: #495057;
}

.footer .small-text {
  font-size: 0.9em;
  color: #6c757d;
}

/* Events Table */
.events-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.events-table thead {
  background: linear-gradient(135deg, #2c5f2d 0%, #3d7c3e 100%);
  color: white;
}

.events-table th,
.events-table td {
  padding: 16px;
  text-align: left;
}

.events-table th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

.events-table tbody tr {
  border-bottom: 1px solid #e9ecef;
  transition: all 0.3s;
}

.events-table tbody tr:hover {
  background: #f8f9fa;
  transform: scale(1.01);
}

.events-table tbody tr:last-child {
  border-bottom: none;
}

/* Event Cards - Mobile Alternative */
.events-cards {
  display: none;
}

.event-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-left: 5px solid #2c5f2d;
  transition: all 0.3s;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 12px;
  gap: 12px;
}

.event-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c5f2d;
  margin: 0;
  flex: 1;
}

.event-card-body {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.event-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #495057;
  font-size: 0.95rem;
}

.event-card-info i {
  color: #6B8E6F;
  width: 20px;
}

#eventsTableContainer {
  padding: 0 20px;
}

#eventSelection {
  padding: 30px 10px;
}

#eventSelection h2 {
  color: #2c5f2d;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
}

#eventSelection p {
  text-align: center;
  color: #6c757d;
  margin-bottom: 20px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #6c757d;
  font-style: italic;
}

/* Mobile Optimization */
.btn,
.menu-card,
.checkbox-item,
.radio-label,
.result-item {
  min-height: 44px;
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding: 12px;
  }

  .container {
    border-radius: 16px;
  }

  .header {
    padding: 10px 60px 10px 16px;
  }

  .header h1 {
    font-size: 1.1em;
  }

  /* Hide table, show cards on mobile */
  .events-table {
    display: none;
  }

  .events-cards {
    display: block;
    padding: 0 8px;
  }

  .event-card {
    padding: 16px;
  }

  .event-card-title {
    font-size: 1.1rem;
  }

  .footer-menu {
    font-size: 0.9rem;
  }

  .footer {
    padding: 16px 20px;
  }

  .subtitle {
    font-size: 1.05em;
  }

  .menu-section {
    padding: 0 18px 20px 18px;
  }

  .menu-section:first-child {
    padding-top: 20px;
  }

  .section-heading {
    font-size: 1.3em;
    margin-bottom: 15px;
  }

  .menu-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .menu-card {
    padding: 24px 20px;
  }

  .menu-icon {
    font-size: 3em;
  }

  .menu-card h3 {
    font-size: 1.25em;
  }

  .form-section,
  .dashboard-section {
    padding: 20px 18px;
  }

  .form-actions {
    flex-direction: column;
    gap: 12px;
  }

  .btn {
    width: 100%;
    padding: 16px 28px;
    font-size: 1.1em;
  }

  .current-event-banner {
    margin: 16px;
    padding: 16px 18px;
    font-size: 1.05rem;
  }

  .back-link {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
  }

  .attendance-table {
    font-size: 0.9em;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .attendance-table th,
  .attendance-table td {
    padding: 10px 8px;
    font-size: 0.95em;
  }

  .member-item {
    padding: 18px;
  }

  .member-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .checkbox-item {
    padding: 14px;
  }

  .checkbox-item input[type="checkbox"] {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .radio-label {
    padding: 16px;
  }

  .radio-label input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .stats-list {
    padding: 18px;
  }

  .stat-row {
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
  }

  .stat-row .stat-value {
    text-align: left;
  }

  .result-item {
    padding: 18px;
  }

  .actions-bar {
    flex-direction: column;
    gap: 12px;
  }

  .actions-bar .btn {
    width: 100%;
  }

  .info-section {
    padding: 0 16px 18px 16px;
  }
}

@media (max-width: 375px) {
  body {
    padding: 8px;
  }

  .header h1 {
    font-size: 1.05em;
  }

  .header {
    padding: 8px 56px 8px 12px;
  }

  .menu-card {
    padding: 20px 16px;
  }

  .menu-card h3 {
    font-size: 1.15em;
  }

  .menu-icon {
    font-size: 2.6em;
  }

  .attendance-table th,
  .attendance-table td {
    padding: 8px 6px;
    font-size: 0.85em;
  }

  .btn {
    padding: 14px 24px;
    font-size: 1.05em;
  }

  .current-event-banner {
    padding: 14px 16px;
    font-size: 1rem;
  }
}

@media print {
  body {
    background: white;
  }

  .container {
    box-shadow: none;
  }

  .btn, .back-link, .actions-bar {
    display: none;
  }
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 30px;
  border: 1px solid #888;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  position: relative;
}

.modal-content h3 {
  margin-bottom: 20px;
  color: #2c5f2d;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Mobile Navigation Menu */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 1000;
  background: linear-gradient(135deg, #2c5f2d 0%, #3d7c3e 100%);
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
/* On dev environment the fixed banner is 40px tall — float button below it */
body.dev-environment .mobile-menu-btn {
  top: 48px;
}

.mobile-menu-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.mobile-menu-btn:active {
  transform: scale(0.95);
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 280px;
  height: 100%;
  background: white;
  z-index: 1001;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-header {
  background: linear-gradient(135deg, #2c5f2d 0%, #3d7c3e 100%);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-menu-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-content {
  padding: 0;
}

.mobile-menu-section {
  border-bottom: 1px solid #e0e0e0;
}

.mobile-menu-section:last-child {
  border-bottom: none;
}

.mobile-menu-section-title {
  padding: 12px 20px;
  background: #f5f5f5;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 0.5px;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  text-decoration: none;
  color: #333;
  transition: background 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-item:last-child {
  border-bottom: none;
}

.mobile-menu-item:hover {
  background: #f9f9f9;
}

.mobile-menu-item i {
  font-size: 20px;
  margin-right: 12px;
  color: #2c5f2d;
  width: 24px;
  text-align: center;
}

.mobile-menu-item span {
  font-size: 16px;
  font-weight: 500;
}

/* Show mobile menu button only on small screens */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Development Environment Banner */
.dev-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  text-align: center;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dev-banner i {
  font-size: 16px;
}

.dev-banner-spacer {
  height: 40px;
}

body.dev-environment {
  padding-top: 0;
}

@media (max-width: 768px) {
  .dev-banner {
    font-size: 12px;
    padding: 6px 15px;
  }
  
  .dev-banner-spacer {
    height: 36px;
  }
}