/* ========================================================================== */
/* Winners page — Neon theme (cleaned)                                        */
/* File: public/assets/css/winners.css                                        */
/* ========================================================================== */

/* Backdrop */
body.page-winners,
body.page-winners #app,
body.page-winners main{
  background: linear-gradient(180deg, #061016, #0b1220 60%, #0a111b) !important;
}

/* ---- SINGLE top offset under the global header (tweak as needed) --------- */
:root{ --ap-header-offset-winners: 250px; } /* adjust if your header height changes */
body.page-winners main{
  background-color:red!important;
 
}

/* ---------------------------------- Hero ---------------------------------- */
.page-winners .winners-hero{
  text-align: center;
  margin: 0 0 50px 0 !important; /* 50px space below title */
}
.page-winners .winners-hero h1{
  color: #16f1d3 !important;
  font-weight: 900;
  letter-spacing: .5px;
  text-shadow: 0 0 10px rgba(22,241,211,.15);
}

/* ------------------------------- Toolbar wrapper & row ------------------------------ */
/* Wrapper contains form + admin button */
.page-winners .winners-toolbar-wrapper{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 40px 0 !important; /* 40px gap before results */
}

/* Order: [search] [Caută] [20/pagină] — tight row */
.page-winners .winners-toolbar{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}

/* Admin CSV upload button */
.page-winners .admin-csv-upload-btn{
  background: linear-gradient(135deg, #ffc107, #ff9800) !important;
  border: 0 !important;
  color: #000 !important;
  font-weight: 900 !important;
  padding: .45rem .9rem !important;
  border-radius: 12px !important;
  box-shadow: 0 0 16px rgba(255, 193, 7, 0.35) !important;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.page-winners .admin-csv-upload-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(255, 193, 7, 0.55) !important;
}

/* Smaller search input (no stretching), keep neon look */
.page-winners .winners-input{
  width: 360px !important;
  max-width: 360px !important;
  min-width: 300px;
  flex: 0 0 auto;
  display: inline-block;

  background: linear-gradient(180deg, #0a1a22, #0f1e28);
  border: 2px solid rgba(22,241,211,.35);
  border-radius: 12px;
  color: #ffffff !important; /* BRIGHT WHITE TEXT when typing */
  padding: .5rem 1rem .5rem 2.5rem;
}
.page-winners .winners-input::placeholder{ color: rgba(230,241,251,.68); }
.page-winners .winners-input:focus{
  outline: none;
  border-color: #16f1d3;
  box-shadow: 0 0 20px rgba(22,241,211,.3);
  color: #ffffff !important; /* BRIGHT WHITE TEXT when focused */
}

/* Compact select and small Caută button */
.page-winners .winners-toolbar .form-select{
  width: auto;
  min-width: 120px;
  flex: 0 0 auto;

  background: linear-gradient(180deg, #0a1a22, #0f1e28);
  border: 2px solid rgba(22,241,211,.35);
  border-radius: 12px;
  color: #e6f1fb;
  padding: .45rem 2.25rem .45rem .75rem;
  position: relative;
  z-index: 10;
}
.page-winners .winners-toolbar .form-select:focus{
  outline: none; border-color:#16f1d3; box-shadow:0 0 15px rgba(22,241,211,.3);
  z-index: 100;
}
.page-winners .winners-toolbar .form-select option{
  background: #0f1e28;
  color: #e6f1fb;
  padding: 0.5rem;
}
.page-winners .winners-toolbar .btn.btn-success{
  width: auto !important;
  flex: 0 0 auto;
  padding: .45rem .9rem;
  line-height: 1.2;
  font-size: .9rem;
  font-weight: 900;
  border-radius: 12px;
  white-space: nowrap;

  background: linear-gradient(135deg, #16f1d3, #0fb8a0);
  border: 0;
  color: #002a24;
  box-shadow: 0 0 16px rgba(22,241,211,.35);
}
.page-winners .winners-toolbar .btn.btn-success:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(22,241,211,.55);
}
.page-winners .winners-toolbar::before{ content:none; }

/* ------------------------------ Card container ---------------------------- */
.page-winners .winners-card{
  background: linear-gradient(180deg, #07141a, #0d1a22);
  border: 2px solid rgba(22,241,211,.35);
  border-radius: 16px;
  box-shadow: 0 0 18px rgba(22,241,211,.25), inset 0 0 20px rgba(22,241,211,.08);
  padding: 1rem;
}

/* ---------------------------------- Table --------------------------------- */
.page-winners .winners-table{ 
  width:100%; 
  border-collapse:collapse; 
  font-size:.95rem;
}
.page-winners .winners-table th,
.page-winners .winners-table td{
  padding: .65rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
  color: #e6f1fb;
}
.page-winners .winners-table th{
  font-weight: 800;
  background: rgba(22,241,211,.05);
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .6px;
}
.page-winners .winners-table tr:hover td{ background: rgba(22,241,211,.05); }

/* Make Melodie column (3rd column) wrap nicely without breaking too much */
.page-winners .winners-table td:nth-child(3){
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 300px; /* Give it plenty of space */
}

/* Theme pill */
.page-winners .ap-theme-chip{
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(22,241,211,.10);
  padding: 2px 8px; border-radius: 999px; font-size: .85rem;
}

/* Votes badge */
.page-winners .ap-votes-badge{
  display: inline-block; padding: .2rem .6rem; border-radius: 12px;
  background: rgba(22,241,211,.18); font-weight: 800; font-size: .85rem; color:#16f1d3;
}

/* YouTube link chip */
.page-winners .ap-yt-link{
  display:inline-block; padding:.25rem .75rem; border-radius:8px;
  background:#ff0000; color:#fff; font-weight:700; text-decoration:none; font-size:.85rem;
}
.page-winners .ap-yt-link:hover{ background:#e60000; }

/* ------------------------------- Pagination ------------------------------- */
.page-winners .winners-pagination{ margin-top:1rem; display:flex; justify-content:center; }
.page-winners .winners-pagination .page-link{
  background: linear-gradient(180deg, #0a1a22, #0f1e28);
  border: 2px solid rgba(22,241,211,.35);
  color:#e6f1fb; padding:.5rem .9rem; border-radius:8px; text-decoration:none; transition:all .3s;
}
.page-winners .winners-pagination .page-link:hover{
  border-color:#16f1d3; box-shadow:0 0 15px rgba(22,241,211,.3); color:#16f1d3;
}
.page-winners .winners-pagination .page-item.active .page-link{
  background: linear-gradient(135deg, #16f1d3, #0fb8a0);
  border-color:#16f1d3; color:#002a24; box-shadow:0 0 20px rgba(22,241,211,.4);
}

/* ================================ MOBILE RESPONSIVE ================================ */
@media (max-width: 767.98px){
  /* Adjust header offset for mobile */
  :root{ --ap-header-offset-winners: 180px; }
  
  /* Hero title smaller */
  .page-winners .winners-hero{
    margin: 0 0 30px 0 !important;
  }
  .page-winners .winners-hero h1{
    font-size: 2.0rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Toolbar wrapper: stack */
  .page-winners .winners-toolbar-wrapper{
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 25px 0 !important;
  }
  
  /* Toolbar: stack vertically */
  .page-winners .winners-toolbar{
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
  }
  
  /* Admin button full width on mobile */
  .page-winners .admin-csv-upload-btn{
    width: 100%;
    order: 4;
  }
  
  /* Search input full width */
  .page-winners .winners-input{
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    flex: 1 1 100%;
  }
  
  /* Button and select: stack them too for clarity */
  .page-winners .winners-toolbar .btn.btn-success{
    width: 100% !important;
    flex: 1 1 auto;
    order: 2;
  }
  
  .page-winners .winners-toolbar .form-select{
    width: 100% !important;
    flex: 1 1 auto;
    order: 3;
    background-color: #0f1e28 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2316f1d3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  /* Card less padding */
  .page-winners .winners-card{
    padding: 0.5rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Hide TEMA column on mobile */
  .page-winners .winners-table th:nth-child(2),
  .page-winners .winners-table td:nth-child(2){
    display: none !important;
  }
  
  /* Table: narrower now (removed TEMA + 2 other columns) - should fit better on mobile */
  .page-winners .winners-table{
    min-width: 380px; /* Reduced even more since we hide TEMA on mobile */
    font-size: 0.8rem;
  }
  
  .page-winners .winners-table th,
  .page-winners .winners-table td{
    padding: 0.5rem 0.4rem !important;
    font-size: 0.75rem;
  }
  
  .page-winners .winners-table th{
    font-size: 0.7rem !important;
    padding: 0.6rem 0.4rem !important;
  }
  
  /* Theme chip smaller */
  .page-winners .ap-theme-chip{
    font-size: 0.75rem !important;
    padding: 2px 6px !important;
    gap: 0.25rem !important;
  }
  
  /* Votes badge smaller */
  .page-winners .ap-votes-badge{
    font-size: 0.75rem !important;
    padding: 0.15rem 0.45rem !important;
  }
  
  /* YouTube link smaller */
  .page-winners .ap-yt-link{
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
  }
  
  /* Pagination smaller */
  .page-winners .winners-pagination{
    margin-top: 0.75rem !important;
  }
  
  .page-winners .winners-pagination .page-link{
    font-size: 0.8rem !important;
    padding: 0.4rem 0.7rem !important;
  }
}


/* Small phones */
@media (max-width: 575.98px){
  :root{ --ap-header-offset-winners: 150px; }
  
  .page-winners .winners-hero h1{
    font-size: 2.0rem !important;
  }
  
  /* Hide TEMA column on small phones too */
  .page-winners .winners-table th:nth-child(2),
  .page-winners .winners-table td:nth-child(2){
    display: none !important;
  }
  
  .page-winners .winners-table{
    min-width: 320px; /* Even smaller - TEMA hidden on mobile */
    font-size: 0.75rem;
  }
  
  .page-winners .winners-table th,
  .page-winners .winners-table td{
    padding: 0.4rem 0.3rem !important;
    font-size: 0.7rem;
  }
}