/**
 * @file
 * Styles for Group Membership Manager.
 */

.club-membership-title {
  font-size: 2rem;
  color: var(--blue-light);
  font-weight: bold;
}

.group-logo {
  margin: 20px 0;
}

.group-membership-management-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}


.group-membership-management-table th {
  background-color: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #ddd;
  font-size: 1.3rem;
  line-height: 1.7rem;
}

.group-membership-management-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  font-size: 1.3rem;
  line-height: 1.7rem;
}

.group-membership-management-table tr:hover {
  background-color: #fafafa;
}

/* Membership Status Styles */
.membership-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 500;
}

.membership-status--member .status-label {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.membership-status--pending .status-label {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.membership-status--pending-other .status-label {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.status-label--pending {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.membership-status--other-group .status-label {
  background-color: #e7f3ff;
  color: #004085;
  border: 1px solid #bee5eb;
}

/* Modal Form Styles */

.group-membership-request-form .form-actions,
.group-membership-leave-form .form-actions,
.group-membership-cancel-request-form .form-actions {
  margin: 0rem !important;
}

.group-membership-leave-form .form-actions .button,
.group-membership-leave-form .form-actions button,
.group-membership-request-form .form-actions .button,
.group-membership-request-form .form-actions button {
  padding: 6px 20px;
  color: var(--orange-main);
  font-size: 1.2rem;
  display: block;
  font-weight: bold;
  line-height: 1.5rem;
  background-color: transparent;
  border: 2px solid var(--orange-main);
  margin-left: auto;
  margin-right: auto;
  transition-duration: 0.2s;
}

.group-membership-leave-form .form-actions .button:hover,
.group-membership-leave-form .form-actions button:hover,
.group-membership-request-form .form-actions .button:hover,
.group-membership-request-form .form-actions button:hover {
  color: #fff;
  background-color: var(--orange-main);
}

.group-membership-leave-form .form-actions .button,
.group-membership-leave-form .form-actions button {
  font-weight: bold;
  font-size: 1.2rem;
}

.group-membership-cancel-request-form .form-actions .button,
.group-membership-cancel-request-form .form-actions button {
  font-weight: bold;
  font-size: 1.2rem;
}

.warning {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .group-membership-management-table {
    font-size: 0.9em;
  }
  
  .group-membership-management-table th,
  .group-membership-management-table td {
    padding: 8px;
  }
  
  .membership-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}