/* Container Styling */
.vha-team-container {
    color: white; /* Text color */
}

/* Header Styling */
.team-header {
    text-align: center;
    color: #ffffff; /* White text */
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Counter Styling */
.team-counter {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
}

/* Button Styling */
.team-add-member .btn {
    background-color: #793aff;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
}

.team-add-member .btn:hover {
    background-color: #5a00b3;
}

/* Table Styling */
.team-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.team-table thead th {
    background-color: #793aff; /* Purple header */
    color: white;
    padding: 10px;
    text-align: center;
    color: white!important;
    font-size: 18px;

}

.team-table tbody td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ffffff;
    font-size: 18px;
    color: white;
}

/* Modal Button */
#addMemberModal .btn-primary {
    background-color: #6a0dad;
    border: none;
}

#addMemberModal .btn-primary:hover {
    background-color: #5a00b3;
}
 

 button.view-member-btn,button.remove-member-btn {
    padding: 0;
    font-size: 20px;
    background: #ffffff00;
    border: 0;
}


button.view-member-btn:hover,button.remove-member-btn:hover,button.view-member-btn:active,button.remove-member-btn:active{
    background-color: #ffffff00!important;
    color: #c8c8c8!important;
}


/* Card */
.vha-soft-card {
    background: #1e002f;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgb(115 28 255);
    border: none;
}

/* Force pill switch (kill ALL native checkbox styling) */
.vha-toggle{
  /* reset native */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  outline: none !important;

  /* pill track */
  width: 44px;
  height: 24px;
  background: #e9ecef;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}

/* knob */
.vha-toggle::after{
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .2s ease;
}

/* focus ring */
.vha-toggle:focus{
  box-shadow: 0 0 0 .2rem rgba(124,58,237,.35);
}

/* ON state: purple track + slide knob */
.vha-toggle:checked{
    background: #7b2bfa;
    border-color: #ffffff;
}
.vha-toggle:checked::after{
  transform: translateX(20px);
}

/* Safety: if some global rule targets inputs, out-specific it */
.vha-soft-card .vha-toggle{
  background-clip: padding-box;
}