/* ============================================================
   LEADERBOARD PAGE
   ============================================================ */

* {
  box-sizing: border-box;
}


:root {

  --page-bg: #f2ecdd;

  --blue: #5F75FD;

  --green: #278d3e;

  --green-dark: #17712f;

  --green-light: #dcebd2;

  --green-text: #399447;

  --yellow: #C7BD55;

  --text: #277f38;

}


/* ============================================================
   NAVBAR - MOBILE (default / desktop state)
   ============================================================ */
/*
  FIX: file ini sebelumnya tidak punya style .nav-toggle sama
  sekali, sehingga hamburger menu tidak pernah berfungsi di
  mobile (beda dengan index/team/schedule/match). Default-nya
  disembunyikan di desktop, baru dimunculkan di breakpoint
  mobile (@media max-width: 620px) di bagian bawah file ini,
  mengikuti pola yang sama persis dengan halaman publik lain.
*/

.nav-toggle {
  display: none;
}


/* ============================================================
   BODY
   ============================================================ */

body {

  margin: 0;

  min-height: 100vh;

  /* FIX: cegah seluruh halaman ikut scroll ke samping di mobile;
     scroll horizontal sekarang hanya terjadi di dalam
     .leaderboard-wrapper (lihat di atas). */
  overflow-x: hidden;

  font-family: "Alan Sans", sans-serif;

  background: var(--page-bg);

  color: var(--text);

}


/* ============================================================
   BACKGROUND
   ============================================================ */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  background-image:
    url("assets/leaderboard.png");

  background-repeat: no-repeat;

  background-position: top center;

  background-size: cover;

  z-index: 0;

  pointer-events: none;

}


/* ============================================================
   LEADERBOARD PAGE
   ============================================================ */

.leaderboard-page {

  position: relative;

  z-index: 1;

  min-height:
    calc(100vh - 72px);

  padding:
    45px 25px 100px;

}


/* ============================================================
   SECTION
   ============================================================ */

.leaderboard-section {

  width:
    min(100%, 1100px);

  margin:
    0 auto;

}


/* ============================================================
   TABLE WRAPPER
   ============================================================ */
/*
  FIX: sebelumnya wrapper ini SAMA SEKALI TIDAK PUNYA STYLE di
  luar media query (tidak ada overflow-x). Akibatnya tabel yang
  punya min-width (720px di desktop, mengecil di mobile) meluber
  keluar layar dan bikin SELURUH HALAMAN ikut ter-scroll ke
  samping di HP, alih-alih hanya tabelnya saja yang di-scroll.
*/

.leaderboard-wrapper {

  width: 100%;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  border-radius: 10px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .10);

}


/* Scrollbar tipis khusus di dalam wrapper (opsional, tetap oke
   kalau browser tidak support) */

.leaderboard-wrapper::-webkit-scrollbar {
  height: 6px;
}

.leaderboard-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18);
  border-radius: 10px;
}


/* ============================================================
   HEADER
   ============================================================ */

.leaderboard-header {

  text-align: center;

  margin-bottom: 30px;

}


/* ============================================================
   TITLE
   ============================================================ */

.leaderboard-title {

  margin: 0;

  color: #ffffff;

  font-size: 40px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: .5px;

}


/* ============================================================
   SUBTITLE
   ============================================================ */

.leaderboard-subtitle {

  margin:
    8px 0 0;

  color: #ffffff;

  font-size: 15px;

  font-weight: 600;

}




/* ============================================================
   TABLE
   ============================================================ */

.leaderboard-table {

  width: 100%;

  min-width: 720px;

  border-collapse: separate;

  border-spacing: 30;

  overflow: hidden;

  font-family:
    "Alan Sans",
    sans-serif;

}


/* ============================================================
   TABLE HEADER
   ============================================================ */

.leaderboard-table thead th {

  height: 58px;

  padding:
    12px 15px;

  background:
    var(--blue);

  color:
    #ffffff;

  font-size:
    14px;

  font-weight:
    800;

  text-align:
    center;

  white-space:
    nowrap;

}


/* HEADER ROUNDING */

.leaderboard-table
thead th:first-child {

  border-radius:
    6px 0 0 0;

}


.leaderboard-table
thead th:last-child {

  border-radius:
    0 6px 0 0;

}


/* ============================================================
   COLUMN WIDTH
   ============================================================ */

.col-no {

  width: 80px;
  

}


.col-team {

  width: 40%;

}


.col-win,
.col-lose {

  width: 90px;

}


.col-match-point {

  width: 160px;

}


.col-total {

  width: 110px;

}


/* ============================================================
   TABLE BODY
   ============================================================ */

.leaderboard-table tbody td {

  height: 58px;

  padding:
    12px 15px;

  background:
    rgba(255, 255, 255);

  border-bottom:
    1px solid #d9dfd1;

  color:
    #53624d;

  font-size:
    15px;

  font-weight:
    700;

  text-align:
    center;

}


/* ============================================================
   TEAM COLUMN
   ============================================================ */

.leaderboard-table
tbody td:nth-child(2) {

  text-align:
    left;

  color:
    #435d3d;

  font-size:
    16px;

  font-weight:
    800;

}


/* ============================================================
   RANK
   ============================================================ */

.leaderboard-table
tbody td:first-child {

  color:
    #667260;

  font-weight:
    800;

}


/* ============================================================
   MATCH POINT
   ============================================================ */

.leaderboard-table
tbody td:nth-child(5) {

  color:
    #435d3d;

  font-weight:
    800;

}


/* ============================================================
   TOTAL
   ============================================================ */

.leaderboard-table
tbody td:last-child {

  color:
    #23be3f;

  font-size:
    18px;

  font-weight:
    800;

}


/* ============================================================
   LAST ROW
   ============================================================ */

.leaderboard-table
tbody tr:last-child td {

  border-bottom:
    none;

}


/* ============================================================
   ELIMINATED (rank 33+, tidak lolos knockout stage)
   ============================================================ */

.leaderboard-table
tbody tr.eliminated td {

  background:
    rgba(240, 240, 236, .75);

  color:
    #9aa294;

  font-weight:
    600;

}


.leaderboard-table
tbody tr.eliminated td:nth-child(2) {

  color:
    #8c9486;

  font-weight:
    700;

}


.leaderboard-table
tbody tr.eliminated td:first-child {

  color:
    #a5aca0;

}


.leaderboard-table
tbody tr.eliminated td:last-child {

  color:
    #b56b6b;

}


.leaderboard-table
tbody tr.eliminated:hover td {

  background:
    rgba(232, 232, 226, .85);

}


/* ============================================================
   CUTOFF DIVIDER (antara rank 32 dan 33)
   ============================================================ */

.leaderboard-table
tr.leaderboard-cutoff-row td {

  height: auto;

  padding: 0;

  background: transparent;

  border-bottom: none;

}


.leaderboard-table
tr.leaderboard-cutoff-row span {

  position: relative;

  display: block;

  padding: 10px 0;

  text-align: center;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;

  color: var(--blue);

  background:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(95, 117, 253, .12) 50%,
      transparent 100%
    );

}


.leaderboard-table
tr.leaderboard-cutoff-row span::before,
.leaderboard-table
tr.leaderboard-cutoff-row span::after {

  content: "";

  position: absolute;

  top: 50%;

  width: 22%;

  height: 2px;

  background: var(--blue);

  opacity: .5;

}


.leaderboard-table
tr.leaderboard-cutoff-row span::before {
  left: 0;
}


.leaderboard-table
tr.leaderboard-cutoff-row span::after {
  right: 0;
}


/* ============================================================
   HOVER
   ============================================================ */

.leaderboard-table
tbody tr {

  transition:
    background .15s ease;

}


.leaderboard-table
tbody tr:hover td {

  background:
    rgba(220, 235, 210 );

}


/* ============================================================
   LOADING
   ============================================================ */

.leaderboard-loading {

  height:
    100px !important;

  text-align:
    center !important;

  color:
    #71806b !important;

  font-size:
    14px !important;

}


/* ============================================================
   EMPTY / ERROR
   ============================================================ */

.leaderboard-empty {

  height:
    100px !important;

  text-align:
    center !important;

  color:
    #777 !important;

  font-size:
    14px !important;

}


/* ============================================================
   WATERMARK
   ============================================================ */

.watermark {

  position:
    absolute;

  left:
    50%;

  top:
    100%;

  transform:
    translateX(-50%);

  pointer-events:
    none;

  z-index:
    2;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 760px) {

  .leaderboard-page {

    padding:
      35px 18px 90px;

  }


  .leaderboard-title {

    font-size:
      34px;

  }


  .leaderboard-wrapper {

    padding:
      8px;

  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .leaderboard-page {

    min-height:
      calc(100vh - 62px);

    padding:
      28px 10px 70px;

  }


  .leaderboard-header {

    margin-bottom:
      20px;

  }


  .leaderboard-title {

    font-size:
      27px;

  }


  .leaderboard-subtitle {

    margin-top:
      6px;

    font-size:
      11px;

  }


  .leaderboard-wrapper {

    padding:
      6px;

    border-radius:
      8px;

  }


  .leaderboard-table {

    /* FIX: sebelumnya 620px -- di HP (lebar layar umum ~360-430px)
       ini masih terlalu lebar, jadi user harus scroll banyak untuk
       lihat semua kolom. Diperkecil supaya jauh lebih dekat/pas
       dengan lebar layar HP. */
    min-width:
      480px;

  }


  .col-no {
    width: 34px;
  }


  .col-win,
  .col-lose {
    width: 52px;
  }


  .col-match-point {
    width: 90px;
  }


  .col-total {
    width: 64px;
  }


  .leaderboard-table
  tr.leaderboard-cutoff-row span {

    padding: 7px 0;

    font-size: 9px;

  }


  .leaderboard-table
  thead th {

    height:
      40px;

    padding:
      6px 6px;

    font-size:
      9px;

  }


  .leaderboard-table
  tbody td {

    height:
      42px;

    padding:
      6px 6px;

    font-size:
      10px;

  }


  .leaderboard-table
  tbody td:nth-child(2) {

    font-size:
      11px;

  }


  .leaderboard-table
  tbody td:last-child {

    font-size:
      13px;

  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

  .leaderboard-page {

    padding:
      25px 8px 60px;

  }


  .leaderboard-title {

    font-size:
      24px;

  }


  .leaderboard-wrapper {

    padding: 4px;

    border-radius: 6px;

  }


  .leaderboard-table {

    /*
      FIX: sebelumnya di breakpoint HP KECIL ini min-width malah
      di-set 590px -- LEBIH LEBAR dari breakpoint 620px di atas
      (480px). Jadi makin kecil layarnya, tabelnya malah makin
      lebar / makin banyak yang perlu di-scroll -- kebalik.
      Sekarang dibuat lebih sempit lagi dari breakpoint sebelumnya.
    */
    min-width:
      400px;

  }


  .col-no {
    width: 28px;
  }


  .col-match-point {
    width: 76px;
  }


  .col-total {
    width: 56px;
  }


  .leaderboard-table
  thead th {

    padding: 5px 4px;

    font-size: 8px;

  }


  .leaderboard-table
  tbody td {

    height: 38px;

    padding: 5px 4px;

    font-size: 9px;

  }


  .leaderboard-table
  tbody td:nth-child(2) {

    font-size:
      10px;

  }


  .leaderboard-table
  tbody td:last-child {

    font-size:
      12px;

  }

}


/* ============================================================
   NAVBAR - MOBILE (HAMBURGER MENU)
   ============================================================
   FIX: seluruh blok di bawah ini SEBELUMNYA TIDAK ADA di file
   ini. Disalin agar konsisten 1:1 dengan behaviour navbar di
   index.html / team.html / schedule.html / match.html, supaya
   pengalaman mobile di halaman Leaderboard sama seperti halaman
   publik lainnya (hamburger, dropdown menu, tombol PLAY NOW
   ikut masuk ke dalam dropdown).
   ============================================================ */

@media (max-width: 620px) {

  /* =========================
     NAVBAR
     ========================= */

  .navbar {
    width: 100%;

    height: 64px;
    min-height: 64px;

    padding: 0 18px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;

    z-index: 1000;
  }


  /* =========================
     LOGO
     ========================= */

  .nav-logo {
    display: flex;
    align-items: center;

    flex-shrink: 0;
  }


  .nav-logo img {
    width: 78px;
    height: auto;
    max-height: 48px;

    display: block;
    object-fit: contain;

    padding: 0;
  }


  /* =========================
     HAMBURGER
     ========================= */

  .nav-toggle {
    width: 42px;
    height: 42px;

    padding: 0;

    border: none;

    background: transparent;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    cursor: pointer;

    position: relative;

    z-index: 1002;
  }


  .nav-toggle span {
    width: 22px;
    height: 2px;

    display: block;

    background: #f8f8f8;

    border-radius: 2px;

    transition:
      transform .25s ease,
      opacity .2s ease;
  }


  /* HAMBURGER -> X */

  .nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }


  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }


  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }


  /* =========================
     MENU
     ========================= */

  .nav-menu {
    position: absolute;

    top: 64px;
    left: 12px;
    right: 12px;

    margin-left: 0;

    padding: 12px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 4px;

    background: rgba(255, 255, 255, .97);

    box-shadow:
      0 10px 30px rgba(40, 70, 40, .15);

    border:
      1px solid rgba(39, 141, 62, .08);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
      opacity .2s ease,
      transform .2s ease,
      visibility .2s ease;

    z-index: 1001;
  }


  .nav-menu.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
  }


  /* =========================
     MENU LINKS
     ========================= */

  .nav-menu > a:not(.play-now) {
    width: 100%;
    min-height: 45px;

    padding: 0 16px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;

    text-decoration: none;

    color: #52634e;

    background: transparent;

    transition:
      background .2s ease,
      color .2s ease;
  }


  .nav-menu > a:not(.play-now):hover {
    color: #278d3e;

    background: rgba(39, 141, 62, .06);
  }


  /* ACTIVE */

  .nav-menu > a.active {
    color: #278d3e;

    background: rgba(39, 141, 62, .08);
  }


  .nav-menu > a.active::after {
    display: none;
  }


  /* =========================
     PLAY NOW (di dalam dropdown)
     ========================= */

  .nav-menu .play-now {
    position: relative;

    width: 100%;
    height: 44px;
    min-height: 44px;

    margin-top: 7px;
    margin-left: 0;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    font-size: 11px;

    background-image: url("assets/PlayNow.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    color: white;
  }


  .nav-menu .play-now::before {
    display: none;
  }


  .nav-menu .play-now span {
    position: relative;
    z-index: 2;

    transform: translateY(-1px);
  }

}


/* ============================================================
   NAVBAR - SMALL MOBILE
   ============================================================ */

@media (max-width: 400px) {

  .navbar {
    height: 60px;
    min-height: 60px;

    padding: 0 15px;
  }


  .nav-logo img {
    width: 70px;
    max-height: 44px;
  }


  .nav-toggle {
    width: 40px;
    height: 40px;
  }


  .nav-menu {
    top: 60px;
    left: 10px;
    right: 10px;
  }

}