/*
 Eternal Eclipse - Top-Spieler-Ranglisten V5
 Styling-Erweiterung zu V4. Keine Aenderungen an AzerothCore oder Daten.
 Fuegt Gold, Silber und Bronze zu ALLEN 5 Ranglisten hinzu.
*/

/* Buttons fuer: Spielzeit / PvP-Kills / Ehre / Arena-Punkte / Arena-Teams */
body.ee-theme #pills-topplayers button.ee-rank-category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  margin: 5px 4px 5px 0;
  padding: 9px 15px;
  border: 1px solid rgba(108,218,255,.65) !important;
  border-radius: 10px;
  color: #e4faff !important;
  background: linear-gradient(155deg,#163955,#0b263e) !important;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: inset 0 1px rgba(210,245,255,.12), 0 4px 14px rgba(0,0,0,.2);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.ee-theme #pills-topplayers button.ee-rank-category-btn:hover,
body.ee-theme #pills-topplayers button.ee-rank-category-btn:focus {
  color: #fff !important;
  border-color: #7bddff !important;
  background: linear-gradient(145deg,#1e577a,#0e344f) !important;
  box-shadow: 0 0 0 2px rgba(67,192,255,.18), 0 7px 20px rgba(10,112,175,.22);
  transform: translateY(-1px);
}
body.ee-theme #pills-topplayers button.ee-rank-category-btn .fa {
  font-size: 15px;
  color: #85dbff;
}

/* Kleine, klare Medaillen-Legende oberhalb jeder Rangliste */
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-medal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 16px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(103,192,240,.18);
  border-radius: 10px;
  background: rgba(10,40,63,.78);
  font-size: 12px;
  font-weight: 650;
  color: #d5eeff;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-medal-legend .ee-rank-legend-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-medal-legend .ee-rank-legend-icon {
  font-size: 17px;
  line-height: 1;
}

/* V4 setzt fuer alle Zeilen !important, daher verwenden wir einen gleichfalls
   spezifischen Selektor plus die spaeter geladene V5-Datei. */
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table.table-striped tbody tr.ee-rank-place-1 {
  background: linear-gradient(90deg,rgba(255,190,46,.23),rgba(255,190,46,.075) 84%) !important;
  box-shadow: inset 3px 0 0 #f8c35b;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table.table-striped tbody tr.ee-rank-place-2 {
  background: linear-gradient(90deg,rgba(202,223,243,.17),rgba(202,223,243,.045) 84%) !important;
  box-shadow: inset 3px 0 0 #bfcedb;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table.table-striped tbody tr.ee-rank-place-3 {
  background: linear-gradient(90deg,rgba(221,151,86,.21),rgba(221,151,86,.055) 84%) !important;
  box-shadow: inset 3px 0 0 #df9d6a;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table.table-striped tbody tr.ee-rank-place-1:hover {
  background: linear-gradient(90deg,rgba(255,190,46,.3),rgba(255,190,46,.13)) !important;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table.table-striped tbody tr.ee-rank-place-2:hover {
  background: linear-gradient(90deg,rgba(202,223,243,.24),rgba(202,223,243,.10)) !important;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table.table-striped tbody tr.ee-rank-place-3:hover {
  background: linear-gradient(90deg,rgba(221,151,86,.28),rgba(221,151,86,.11)) !important;
}

body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table tbody tr.ee-rank-place-1 > td:first-child,
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table tbody tr.ee-rank-place-1 > th[scope="row"] {
  color: #ffd878 !important;
  font-weight: 800;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table tbody tr.ee-rank-place-2 > td:first-child,
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table tbody tr.ee-rank-place-2 > th[scope="row"] {
  color: #e3efff !important;
  font-weight: 800;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table tbody tr.ee-rank-place-3 > td:first-child,
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-body table.table tbody tr.ee-rank-place-3 > th[scope="row"] {
  color: #ffd0a6 !important;
  font-weight: 800;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-medal {
  display: inline-block;
  margin-right: 7px;
  font-size: 19px;
  line-height: 1.05;
  vertical-align: middle;
  white-space: nowrap;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-label {
  display: inline-block;
  margin-left: 7px;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid currentColor;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  vertical-align: middle;
  white-space: nowrap;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-place-1 .ee-rank-label {color:#ffd478;background:rgba(255,195,59,.10)}
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-place-2 .ee-rank-label {color:#deebf5;background:rgba(200,230,245,.08)}
body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-place-3 .ee-rank-label {color:#efb98d;background:rgba(239,185,141,.09)}

/* Die breiten V4-Popups behalten ihre Groesse; nur Titel und Schliessen wirken aufgeraumter. */
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-header .modal-title {
  letter-spacing: .01em;
}
body.ee-theme .ee-rank-modal.ee-rank-v5 .modal-footer .btn-danger {
  min-width: 118px;
}
@media (max-width: 640px) {
  body.ee-theme #pills-topplayers button.ee-rank-category-btn {min-height: 40px; padding: 9px 11px;}
  body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-label {display: none;}
  body.ee-theme .ee-rank-modal.ee-rank-v5 .ee-rank-medal-legend {font-size:11px; gap:5px 9px;}
}
@media (prefers-reduced-motion: reduce) {
  body.ee-theme #pills-topplayers button.ee-rank-category-btn {transition:none; transform:none !important;}
}