/* mepr-user-list.css */

/* GRID WRAPPER */
.mepr-user-list-grid {
  display: grid;
  gap: 20px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* CARD */
.mepr-user-card {
  background: #fff;
  border: 1px solid #ccd0d4;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;

  /* Important: allow grid item to shrink so long strings don't blow out columns */
  min-width: 0;
}

.mepr-user-card:hover {
  transform: translateY(-5px);
}

/* AVATAR */
.mepr-user-avatar img {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  object-fit: cover;
  margin-bottom: 10px;
}

/* INFO WRAPPER */
.mepr-user-info {
  /* Ensure child text respects available width inside the card */
  min-width: 0;
}

/* HEADINGS */
.mepr-user-info h3 {
  margin: 10px 0 5px;
  font-size: 18px;
  color: #333;
}

/* GENERAL TEXT */
.mepr-user-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* EMAIL: single-line with ellipsis */
.mepr-user-info p.email {
  white-space: nowrap;        /* Keep on one line */
  overflow: hidden;           /* Hide overflow */
  text-overflow: ellipsis;    /* Show ... */
  display: block;             /* Ensure ellipsis works consistently */
  max-width: 100%;            /* Constrain to card width */
}

/* BUTTONS */
.mepr-export-btn {
  background-color: #0073aa;
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.mepr-export-btn:hover {
  background-color: #005f8d;
}

/* Wider grid tracks so long emails have room */
.mepr-user-list-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

/* Flex row card; allow content to shrink/grow properly */
.mepr-user-card{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:12px;
  background:#fff;
  min-width:0; /* critical for long text in grid/flex children */
}

/* Keep avatar fixed-size; don’t let it steal width */
.mepr-user-avatar{ flex:0 0 auto; }
.mepr-user-avatar-img{ border-radius:50%; }

/* Let the text area take the remaining space and shrink if needed */
.mepr-user-info{ flex:1 1 auto; min-width:0; }

.mepr-user-info h3{
  margin:0 0 4px;
  font-size:1rem;
  line-height:1.2;
}

.mepr-user-info p{ margin:0; color:#475569; }
.mepr-user-info .mepr-user-phone{ color:#334155; }

/* Single-line + ellipsis for emails */
.mepr-user-info .mepr-user-email{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* Export button */
.mepr-export-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#0ea5e9;
  color:#fff;
  border:none;
  border-radius:6px;
  padding:10px 14px;
  cursor:pointer;
}
.mepr-export-btn:hover{ background:#0284c7; }

/* At larger viewports, let each card be even wider (more email visible) */
@media (min-width:640px){
  .mepr-user-list-grid{
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  }
}

/* On very small screens, you can stack content to give email full width */
@media (max-width:420px){
  .mepr-user-card{
    flex-direction:column;
    align-items:center;
  }
}
';