.tab{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #666;
    color: rgb(255 255 255 / 60%);
    font-weight: 700;
    font-family: 'poppins', sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    border-radius: 10px;
}

.add_team_sport tbody tr:hover>td, .add_team_sport tbody tr:hover>th {
    background-color: #000 !important;
}

.add_team_sport tbody tr:hover {
    background-color: #000 !important;
}

.add_team_sport button.edit-team-btn {
    background: #0a0c0e;
    border: unset;
    border-radius: 4px;
    padding: 4px 8px 6px 8px;
}


main.admin-add-team-sport-wrap .tab.active-listed, main.admin-add-team-sport-wrap .tab.active-sports {
    background: rgba(246,173,85,0.2);
    color: #ffbd07;
    font-weight: 700;
    font-family: 'poppins', sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
 }

.tab.active-listed::before, .tab.active-sports::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #F6AD55;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.tab::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: rgb(255 255 255 / 60%);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

main.admin-add-team-sport-wrap .footer {
    display: flex;
    gap: 25px;
    align-items: start;
    margin-top: 36px;
}

main.admin-add-team-sport-wrap .footer div:first-child {
    width: calc(50% - 15px);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'poppins', sans-serif;
    font-weight: 400;
}
main.admin-add-team-sport-wrap .footer .sports_pagination {
    width: calc(50% - 15px);
    justify-content: end;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

main.admin-add-team-sport-wrap .footer .sports_pagination button.page.active {
    background: #d4a017;
    color: #000;
    border: 1px solid #d4a017;
}
main.admin-add-team-sport-wrap .footer .sports_pagination button.page{
    padding: 8px 16px;
    background-color: #161616;
    color: #fff;
    border: 1px solid #262626;
    font-weight: 600;
    font-size: 12px;
    border-radius: 8px;
    font-family: 'poppins', sans-serif;
}

main.admin-add-team-sport-wrap .add_team_pagination {
    width: calc(50% - 15px);
    justify-content: end;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-add-team-sport-wrap .add_team_sport thead th:first-child {
 text-align: left;
}
.add_team_pagination button.teams-page {
    padding: 8px 16px;
    background-color: #161616;
    color: #fff;
    border: 1px solid #262626;
    font-weight: 600;
    font-size: 12px;
    border-radius: 8px;
    font-family: 'poppins', sans-serif;
}
.add_team_pagination button.teams-page:hover {
    background: #d4a017;
    color: #000;
    border: 1px solid #d4a017;  
}

.add_team_pagination button.active {
    background: #d4a017;
    color: #000;
    border: 1px solid #d4a017;
}

.add_team_pagination button.active:hover {
    background-color: #161616;
    color: #fff;
    border: 1px solid #262626;
}

.add_team_pagination .page {
    padding: 8px 16px;
    background-color: #161616;
    color: #fff;
    border: 1px solid #262626;
    font-weight: 600;
    font-size: 12px;
    border-radius: 8px;
    font-family: 'poppins', sans-serif;
    /* cursor: pointer; */
}
.add_team_pagination .page:hover,
.add_team_pagination .page:focus-visible,
.add_team_pagination .page:active {
    background: #d4a017;
    color: #000;
    border: 1px solid #d4a017;
}

/*.tab.active-sports {
    background: linear-gradient(to right, #6c757d, #495057);
    color: #ffffff;
}

.tab.active-sports::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
 */
#sport-message{
    margin-bottom:10px;
    color:green;
}
.small-logo.team_name {
    margin: 0;
}

main.admin-add-team-sport-wrap button.btn.btn-yellow {
    background: linear-gradient(148deg, #D4AF37, #B8860B);
    padding: 15px 20px;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #000;
    border: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #B8860B;
    white-space: normal;
    word-break: break-word;
}

main.admin-add-team-sport-wrap button.btn.btn-yellow:hover {
    border: 1px solid #fff;
    color: #fff;
}

main.admin-add-team-sport-wrap button.btn.btn-yellow:hover img {
    filter: invert(1);
}


main.admin-add-team-sport-wrap button.btn.btn-outline {
    background: transparent;
    padding: 15px 20px;
    border-radius: 5px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    border: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #fff;
    white-space: normal;
    word-break: break-word;
}
main.admin-add-team-sport-wrap button.btn.btn-outline i { 
    margin-right: 10px;
 }
main.admin-add-team-sport-wrap button.btn.btn-outline:hover {
    border: 1px solid #B8860B;
    background: linear-gradient(148deg, #D4AF37, #B8860B);
    color: #000;
}
main.admin-add-team-sport-wrap button.btn.btn-outline:hover i {
    color: #000;
}


/* TABLE COMPONENTS */
.add_team_sport thead {
    background: #090909;
}

.add_team_sport tbody tr {
    border-bottom: 1px solid #1e1e1e;
    height: 65px;
}

.add_team_sport th, .add_team_sport td {
    padding: 16px;
    border-right: 1px solid #2a2a2a;
    border-bottom: 1px solid #2a2a2a;
    vertical-align: middle;
}

.add_team_sport th {
    font-size: 12px;
    color: rgb(255 255 255 / 50%);
    font-family: 'poppins', sans-serif;
    font-weight: 700;
}

.add_team_sport th:last-child {
    border-right: none;
}

/*.add_team_sport table tbody>tr:nth-child(odd)>td, .add_team_sport table tbody>tr:nth-child(odd)>th {
    background: none;
} */

 table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: unset !important;
 }

.edit-btn {
    background: #0a0c0e;
    border-radius: 3px;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: 4px 8px 6px 8px;
    border: none;
}

.edit-btn:hover {
    background: #0a0c0e !important;
    border: none !important;
    /* opacity: 0.5;     */
}


.delete-btn {
    background: #2b0f0f;
    color: #ff4d4d;
    border: none;
    padding: 8px;
    border-radius: 4px;
    padding: 4px 8px 6px 8px;
}
.delete-btn:hover {
    background: #2b0f0f !important;
    border: none !important;
    opacity: 0.5;
}

/* Alignment for specific columns */
.add_team_sport td:nth-child(2),
.add_team_sport th:nth-child(2),
.add_team_sport td.action-btns {
    text-align: center;
}

/* TEAM & LOGO STYLING */
.team-cell, .team-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team-name, .main-name {
    font-weight: 600;
    font-size: 12px;
    font-family: 'poppins', sans-serif;
    line-height: 1.2em;
    color: #fff;
}

.team-name span, .sub-text {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgb(255 255 255 / 40%);
    margin-top: 3px;
    font-family: 'poppins', sans-serif;
    line-height: 1.2em;    
}

.team-icon, .logo-icon, .small-logo, .logo-circle-small {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-icon, .logo-icon {
    width: 34px;
    height: 34px;
    background: #121821;
    border: 1px solid #2a2f36;
}

.small-logo, .logo-circle-small {
    width: 28px;
    height: 28px;
    background: #333;
    font-size: 12px;
    margin: auto;
}

/* TEXT HIGHLIGHTS */
.country, .highlight-yellow {
    font-size: 20px;
    font-family: 'poppins', sans-serif;
    line-height: 1.2em;
    font-weight: 700;
   background: linear-gradient(148deg, #D4AF37, #B8860B);
  background-clip: text;
  color: transparent;
}

.text-dim {
    color: rgb(255 255 255 / 40%);
    font-size: 14px;
    font-family: 'poppins', sans-serif;
    line-height: 1.2em;
    font-weight: 600;
}

.add_team_sport tbody tr:hover {
    background-color: unset !important;
}

.text-center { 
    text-align: center; 
}

/* ACTIONS */
.actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.actions button {
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
}



/* ADD SPORT MODAL */

/* MODAL BACKGROUND */

.sport-modal{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
z-index:99999;
}

/* MODAL BOX */

.sport-modal-box{
width:892px;
margin: 7% auto;
background:#ffffff;
border-radius:12px;
padding: 40px 30px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: fit-content;
}

.sport-modal-box form { 
    height: 280px;
    overflow-x: auto;

}

.sport-modal-box h2.gold {
    font-size: 40px !important;
    line-height: 1.2em !important;
    letter-spacing: 0.6px;
    background: linear-gradient(145deg, #D4AF37 0%, #B8860B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: unset !important;
    font-weight: 700;
    border-bottom: unset;
    margin-bottom: 5px;
    padding-bottom: 0px;
}


/* TOP LOGO */
.modal-logo {
    text-align: center;
}


/* HEADER */

.sport-modal-header{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:2px solid #c9a24a;
padding-bottom:12px;
margin: 10px 0px 25px 0px;
}

.sport-modal-header h2{
color:#c9a24a;
font-size:26px;
font-weight:700;
}

.sport-modal-header p {
    font-size: 14px;
    color: rgb(0 0 0 / 60%);
    font-family: 'poppins', sans-serif;
    font-weight: 400;
    line-height: 1.4em;
    margin-bottom: 0px;
}

.sport-modal-header span.close-team-modal {
    font-size: 36px;
    color: #000;
    cursor:pointer;
}

.close-sport-modal{
font-size:22px;
cursor:pointer;
}

/* LABEL */

form label{
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    display:block;
    font-size: 12px;
    line-height: 1.2em;
    margin-top: 15px;
    margin-bottom: 7px;
    font-family: 'poppins', sans-serif;
}

/* INPUT */

form input[type=text]{
    width:100%;
    padding:12px;
    border-radius:6px;
    background:#f5f5f5;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    line-height: 1.2em;
    font-family: 'poppins', sans-serif;
    padding: 12px 10px;
    height: 48px;
    border: unset;
}
form input[type=text]::placeholder{
    font-size: 14px;
    font-weight: 400;
    color: #000;
    line-height: 1.2em;
    font-family: 'poppins', sans-serif;
}

/* LOGO BOX */

.logo-upload{
width:80px;
height:80px;
border:2px dashed #262626;
border-radius: 8px;
display:flex;
align-items:center;
justify-content:center;
background:#f5f5f5;
position:relative;
cursor:pointer;
}

.logo-upload input{
opacity:0;
position:absolute;
width:100%;
height:100%;
cursor:pointer;
}

.upload-icon{
text-align:center;
font-size:10px;
line-height: 1.2em;
font-weight: 700;
font-family: 'poppins', sans-serif;
color:rgb(0 0 0 / 60%);
display: flex;
flex-direction: column;
}

/* BUTTON AREA */

.modal-buttons{
margin-top:30px;
display:flex;
align-items:center;
gap:30px;
}

/* ADD SPORT BUTTON */

.btn-add-sport{
background:linear-gradient(to right,#8a6322,#c89b1e);
border:none;
color:#fff;
padding:14px 50px;
border-radius:8px;
font-weight:700;
cursor:pointer;
}

/* CANCEL */

.cancel-sport{
background:none;
border:none;
font-weight:600;
cursor:pointer;
}

.sport-modal-header h2.gold {
    color: #c89b1e !important;
}

.sport-modal-header .close-sport-modal {
    color: #000000;
    font-size: 36px;
}

button.btn-add-sport, button.btn-add-team {
    width: 50%;
    background: linear-gradient(145deg, #D4AF37 0%, #B8860B 100%);
    color: #000000;
    font-weight: 700;
    border: none;
    font-size: 16px;
    line-height: 1.2em;
    border-radius: 8px;
    font-family: 'poppins', sans-serif;
    border: 1px solid #B8860B;
    white-space: normal;
    word-break: break-word;
    padding: 12px 15px;
}
button.btn-add-sport:hover, button.btn-add-team:hover {
    border: 1px solid #B8860B;
    color: #fff;
}

button.cancel-sport, button.cancel-team {
    width: 50%;
    background: none;
    border: none;
    color: #000000;
    font-weight: 700;
    font-family: 'poppins', sans-serif;
    font-size: 16px;
    line-height: 1.2em;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: normal;
    word-break: break-word;
    padding: 12px 15px;
}
button.cancel-sport:hover, button.cancel-team:hover {
    border-radius: 8px;
    border: 1px solid #B8860B;
    background: linear-gradient(145deg, #D4AF37 0%, #B8860B 100%);
    color: #fff;
}

form#add-team-form label {
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    font-size: 12px;
    line-height: 1.2em;
    margin-top: 15px;
    margin-bottom: 7px;
    font-family: 'poppins', sans-serif;
}

form#add-team-form .dark_bg label.golden {
    color: #c89b1e !important;
    background: linear-gradient(145deg, #D4AF37 0%, #B8860B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 0px !important;
}

.dark_bg input.team_field {
    background: rgb(0 0 0 / 5%);
}
/*
form#add-team-form input {
    font-size: 14px;
    font-weight: 400;
    color: rgb(0 0 0 / 40%);
    line-height: 1.2em;
    font-family: 'poppins', sans-serif;
    padding: 12px 10px;
    height: 48px;
    border: unset;
} */

.flex {
    display: flex;
}

input.team_field {
    height: 50px;
    margin-right: 10px;
    margin-top: 10px;
    align-items: center;
}

label.golden {
    color: #c89b1e;
}

.dark_bg {
    background: #f5f5f5;
    padding: 16px;
    margin-top: 16px;
    border-radius: 12px;
}

.select_sport {
    background: #f5f5f5;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    line-height: 1.2em;
    font-family: 'poppins', sans-serif;
    padding: 12px 10px;
    height: 48px;
}

/* default */
.tab {
  border-radius: 8px 0 0 8px;
}

/* Left tab active → left round, right tab opposite round */
.tab.active-listed:first-child {
  border-radius: 8px 0 0 8px;
}
.tab.active-listed:first-child + .tab {
  border-radius: 0 8px 8px 0;
}

/* Right tab active → right round, left tab opposite round */
.tab.active-sports:last-child {
  border-radius: 0 8px 8px 0;
}
.tab.active-sports:last-child:first-child {
  border-radius: 8px 0 0 8px;
}

.add-sport-btn,
.add-team-btn {
    display: none;
}


@media screen and (max-width: 1200px) {
        .sport-modal-box h2.gold { font-size: 35px !important; }
main.admin-add-team-sport-wrap .footer .sports_pagination { width: 100%; justify-content: center; }
    .sport-modal-box { width: 90%; padding: 30px 20px;  margin:0 auto; top: 50%; transform: translate(0, -50%);}
    .sport-modal-box form { height: auto; overflow-x: inherit; }
          .add_team_sport table,
  .add_team_sport thead,
  .add_team_sport tbody,
  .add_team_sport tr,
  .add_team_sport td {
    display: block;
    width: 100%;
  }

  .add_team_sport thead {
    display: none;
  }

  #teams-table-body, tbody#sports-table-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    border: 1px solid #262626;
  }

  .team-cell, .team-info {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    text-align: left;
}

  #teams-table-body tr, tbody#sports-table-body tr {
    padding: 10px;
    border-radius: 0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    border-bottom: 1px solid #262626;
  }

  #teams-table-body td, tbody#sports-table-body td {
    display: block;
    text-align: center;
    padding: 5px 0;
  }
  #teams-table-body td:first-child, tbody#sports-table-body td:first-child {
  text-align: left;
  }
  #teams-table-body td:first-child .team-info, tbody#sports-table-body td:first-child  .team-info{
  justify-content: start;
  align-items: baseline;
  }

#teams-table-body td.text-dim, tbody#sports-table-body td.text-dim {
    text-align: left;
    justify-content: start;
    padding-left: 40px;
}
 

  .add_team_sport tbody tr { height: unset; }
  td.action-btns { grid-column: span 2; }
  td.text-center.text-dim {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
main.admin-add-team-sport-wrap .footer {
    flex-direction: column;
}
main.admin-add-team-sport-wrap .footer div:first-child {
    width: 100%;
    text-align: center;
}
main.admin-add-team-sport-wrap .add_team_pagination {
    width: 100%;
    justify-content: center;
}
}
@media screen and (max-width: 767px) {
    .sport-modal-box h2.gold { font-size: 25px !important; }
    .tab { border-radius: 8px !important; }
    main.admin-manage-users-right-content-wrap .header-right { flex-direction: column !important; }
}