/* ==========================================================
   Admin Pays — CSS complet (table + upload + pagination + autocomplete)
   ========================================================== */

/* important : le dropdown doit pouvoir dépasser */
.tcPaysCard,
.tcPaysHead,
.tc-tableWrap,
.tc-card{
  overflow: visible !important;
}

/* ---------------------------
   Card wrapper
--------------------------- */
.tcPaysCard{
  margin-top: 12px;
}

/* ---------------------------
   Head row (search + reset)
--------------------------- */
.tcPaysHead{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Reset btn */
.tcPaysBtn{
  text-decoration:none;
  text-align:center;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tcPaysBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
}

/* ---------------------------
   Search (with dropdown)
--------------------------- */
.tcPaysSearch{
  position: relative;
  overflow: visible !important;

  display:flex;
  align-items:center;
  gap: 10px;

  border: 1px solid rgba(17,24,39,.10);
  background: #f7f8fe;
  border-radius: 999px;
  padding: 10px 12px;

  min-width: min(640px, 100%);
  flex: 1;
}

.tcPaysSearch__icon{
  opacity:.65;
  font-weight: 900;
  flex: 0 0 auto;
}

.tcPaysSearch input{
  border:0;
  outline:none;
  background: transparent;
  width:100%;
  font-weight: 900;
  font-size: 13px;
  min-width: 160px;
}
.tcPaysSearch input::placeholder{
  color: rgba(111,115,130,.9);
  font-weight: 800;
}

.tcPaysSearch button{
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tcPaysSearch button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
}

/* Autocomplete dropdown */
.tcPaysSearchDropdown{
  position:absolute;
  left: 10px;
  right: 10px;
  top: calc(100% + 10px);

  background: #fff;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(17,24,39,.10);
  padding: 8px;

  z-index: 9999;
  max-height: 280px;
  overflow:auto;
}

.tcPaysSearchDropdown::-webkit-scrollbar{ width: 10px; }
.tcPaysSearchDropdown::-webkit-scrollbar-thumb{
  background: rgba(109,94,252,.22);
  border-radius: 999px;
}

/* Suggestion row */
.tcPaysSug{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  border: 1px solid transparent;

  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.tcPaysSug:hover,
.tcPaysSug.is-active{
  background: rgba(109,94,252,.10);
  border-color: rgba(109,94,252,.18);
  transform: translateY(-1px);
}

.tcPaysSug__left{
  min-width:0;
  display:flex;
  align-items:center;
  gap: 10px;
}

.tcPaysSug__flag{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(109,94,252,.12);
  border: 1px solid rgba(109,94,252,.18);
  flex: 0 0 auto;
}

.tcPaysSug__name{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.tcPaysSug__meta{
  font-weight: 900;
  font-size: 12px;
  color: #6f7382;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ---------------------------
   Country cell
--------------------------- */
.tcPaysName{
  display:flex;
  align-items:center;
  gap: 12px;
}

.tcPaysFlag{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(109,94,252,.12);
  border: 1px solid rgba(109,94,252,.18);
  flex: 0 0 auto;
}

.tcPaysTitle{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
}

.tcPaysSub{
  color: #6f7382;
  font-weight: 800;
  font-size: 12px;
  margin-top: 2px;
}

/* ---------------------------
   Pills / counts
--------------------------- */
.tcPill{
  display:inline-flex;
  justify-content:center;
  align-items:center;

  min-width: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: #f7f8fe;
  font-weight: 900;
}

/* ---------------------------
   Cover preview
--------------------------- */
.tcCoverCell{
  display:flex;
  align-items:center;
  gap: 10px;
}

.tcCoverPreview{
  width: 110px;
  height: 44px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.10);
  background: #f7f8fe;
  display:grid;
  place-items:center;
}

.tcCoverPreview img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.tcCoverEmpty{
  font-weight: 900;
  color: #6f7382;
  font-size: 12px;
}

/* Badge cover */
.tcCoverBadge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(17,24,39,.10);
}

.tcCoverBadge.is-on{
  background: rgba(109,94,252,.12);
  border-color: rgba(109,94,252,.18);
  color: #6d5efc;
}
.tcCoverBadge.is-off{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.18);
  color: #b91c1c;
}

/* ---------------------------
   Actions + upload
--------------------------- */
.tcPaysActions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.tcUploadForm{
  display:flex;
  align-items:center;
  gap: 10px;
}

.tcUploadForm input[type="file"]{
  width: 210px;
  max-width: 210px;
  font-weight: 800;
  font-size: 12px;
}

.tcUploadForm button{
  border: 0;
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(135deg, #6d5efc, #8a7bff);
  box-shadow: 0 14px 26px rgba(109,94,252,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tcUploadForm button:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(109,94,252,.30);
}

/* Icon actions */
.tcIconActions{
  display:flex;
  gap: 8px;
  align-items:center;
}

.tcIconBtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  text-decoration:none;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  cursor:pointer;
  font-weight: 900;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.tcIconBtn:hover{
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
  transform: translateY(-1px);
}

.tcIconBtn.is-danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.18);
}

.tcIconBtn.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}

/* ---------------------------
   Pagination
--------------------------- */
.tcPaysPagerMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.tcPaysPagerMeta.is-bottom{
  margin-top: 14px;
}

.tcPaysPagerText{
  font-weight: 900;
  color: #6f7382;
  font-size: 13px;
}

.tcPaysPager{
  display:flex;
  align-items:center;
  gap: 10px;
}

.tcPagerBtn{
  text-decoration:none;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.tcPagerBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
}

.tcPagerBtn.is-disabled{
  opacity: .45;
  pointer-events: none;
}

.tcPagerNow{
  font-weight: 900;
  font-size: 13px;
  color: #1b1f2a;
  padding: 8px 10px;
  border-radius: 14px;
  background: #f7f8fe;
  border: 1px solid rgba(17,24,39,.10);
}

/* ---------------------------
   Responsive
--------------------------- */
@media (max-width: 1100px){
  .tcUploadForm input[type="file"]{
    width: 170px;
    max-width: 170px;
  }
  .tcPaysActions{
    flex-direction: column;
    align-items:flex-start;
  }
}

@media (max-width: 900px){
  .tcUploadForm{
    flex-wrap: wrap;
  }
  .tcUploadForm input[type="file"]{
    width: 100%;
    max-width: 100%;
  }
  .tcPaysSearch{
    min-width: 100%;
  }
}

@media (max-width: 560px){
  .tcPaysSearch{
    border-radius: 18px;
    padding: 10px;
  }
  .tcPaysSearch button{
    padding: 8px 10px;
  }
  .tcCoverPreview{
    width: 96px;
    height: 42px;
  }
}