/* GLOBAL */
body{
    font-family: 'Roboto';
}

.title1{
  font-size: 64px;
  line-height: 80px;
  font-weight: 500;
  color: white;
}


/* NAVBAR */

.navbar {
  background-color: #F2F2F2; /* Merah yang lebih gelap */
  padding: 0px 8%;
  position: fixed;
  width: 100%;
  z-index: 999;
}

.navbar-brand  img{
  max-width: 120px!important;
  width: 100%;
}

.navbar-nav .nav-link {
  font-size: 16px;
  line-height: 24px;
  padding: 32px 20px;
  margin: 0px 16px;
  border-bottom: 5px transparent solid;
  color: #000000 !important;
  font-weight: 700;
  transition: all 0.25s ease-in-out;
}

.navbar-nav .nav-link:hover {
  border-bottom: 5px #960e14 solid;
  color: #960e14!important;
}

.navbar-nav .nav-link.active {
  border-bottom: 5px #960e14 solid;
  color: #960e14 !important;
}


/* Navbar toggle button (burger) */
.navbar-collapse{
    flex-grow: unset!important;
}

/* Styling untuk navbar pada layar kecil */
@media (max-width: 991.4px) {
  .navbar-nav {
    text-align: center;
  }

  .navbar-nav .nav-item {
    margin-bottom: 10px;
  }

  .navbar {
  padding: 16px 5%;
}

.navbar-brand  img{
  max-width: 100px!important;
  width: 100%;
  
}


.navbar-nav .nav-link {
  font-size: 16px;
  line-height: 24px;
  padding: 8px 0px;
  text-align: start;
  margin: 0px;
  border-bottom: 2px transparent solid;
  color: #000000 !important;
  font-weight: 700;
  transition: all 0.25s ease-in-out;
}

.navbar-nav .nav-link:hover {
  border-bottom: 2px #960e14 solid;
  color: #960e14!important;
}

.navbar-nav .nav-link.active {
  border-bottom: 2px #960e14 solid;
  color: #960e14 !important;
}

.navbar-collapse{
  padding-top: 24px;
}

}

@media (min-width:767.5px) and (max-width:991.4px){
  .title1{
  font-size: 48px;
  line-height: 56px;
}
}
@media (max-width:767.4px) {
  .title1{
  font-size: 36px;
  line-height: 44px;
}
}



/* INDEX SECTION 1 */
.section1{
  background: url(../uploads/section1-home-bg.webp) center/cover no-repeat;
  min-height: 100vh;
  background-position: top center;
  display: flex;
  align-items: center;     /* center vertikal */
  /* optional: jika ingin tetap ada ruang atas/bawah */
  padding: 80px 0;         /* kecilkan padding, jangan 250/150 */
  position: relative;
}

.section1::before{
  content: "";                  /* WAJIB */
  position: absolute;
  inset: 0;                     /* sama dengan top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.3);  /* atur opasitas sesuai selera */
}

/* Biar teks di atas overlay */
.section1 > .container{
  position: relative;
    z-index: 1;
}

.section1-matches{
  background: url(../uploads/tim-inko.webp) center/cover no-repeat;
  min-height: 100vh;
  background-position: center center;
  display: flex;
  align-items: center;     /* center vertikal */
  /* optional: jika ingin tetap ada ruang atas/bawah */
  padding: 80px 0;         /* kecilkan padding, jangan 250/150 */
  position: relative;
}

.section1-matches::before{
  content: "";                  /* WAJIB */
  position: absolute;
  inset: 0;                     /* sama dengan top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.3);  /* atur opasitas sesuai selera */
}

/* Biar teks di atas overlay */
.section1-matches > .container{
  position: relative;
    z-index: 1;
}





/* SECTION 2 */
.section2{
  padding: 150px 0px;
}
/* Tabs look */
.ranking-tabs { border-bottom:none; gap:8px; }
.ranking-tabs .nav-link { border:0!important; font-weight:600; color:#6b6b6b; background:#f3f3f3; border-radius:8px 8px 0 0; padding:12px 25px; transition: all 0.25s ease-in-out;}
.ranking-tabs .nav-link.active { color:#fff!important; background:#d61c1c!important; }
.ranking-tabs .nav-link:hover{
  color:#fff!important; background:#d61c1c!important; 
}

/* Underline */
.ranking-underline { height:3px; background:#960e14; width:130px; margin:10px 0 6px 0; border-radius:2px; }

/* Table */
.ranking-table thead th { font-size:.8rem; letter-spacing:.06em; color:#9aa0a6; border-bottom:1px solid #ececec; background:#fff; }
.ranking-table tbody tr { border-bottom:1px solid #efefef; }
.ranking-table td { padding:14px 8px; }
.ranking-table .col-rank { width:80px; }
.ranking-table .points { font-weight:700; }

/* Pager */
.pager-wrap { padding:8px 4px; }
.pager-wrap .btn.disabled, .pager-wrap .btn:disabled { pointer-events:none; opacity:.5; }

@media (max-width:991.4px){
  .ranking-tabs .nav-link{ padding:10px 20px; font-size:14px; }
  .ranking-table .col-rank{ width:64px; }

  .section2{
    padding: 100px 0px;
  }
}


.btn-add-player{
  border: 2px solid #03a32e;
  padding: 12px 25px;
  background: #03a32e;
  border-radius: 8px;
  color: #F2F2F2;
  transition: 0.25s ease-in-out;
}

.btn-add-player:hover{
  background: #F2F2F2;
  color: #03a32e;
}

.button-save-add-player{
  border: 2px solid #03a32e;
  padding: 12px 25px;
  background: #03a32e;
  border-radius: 8px;
  color: #F2F2F2;
  width: 100%;
  transition: 0.25s ease-in-out;
}

.button-save-add-player:hover{
  background: #F2F2F2;
  color: #03a32e;
}

@media (max-width:991.4px){
  .btn-add-player{
  padding: 10px 20px;
  font-size: 14px;
  width: 100%;
}

.button-save-add-player{
  padding: 10px 20px;
  font-size: 14px;
}
}



/* FOOTER */
.footer-klasemen{
  background-color: #f2f2f2;
}


/* MODAL */
.modal-custom{
  padding: 32px 24px;
}



/* ===== Mobile stacking for Create Matches & Recent Matches ===== */
@media (max-width: 991.98px) {
  /* Create Matches table -> stacked cards */
  #matchesTable thead {
    display: none;
  }
  #matchesTable tbody tr.match-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: #fff;
  }
  #matchesTable tbody td {
    display: block;
    width: 100% !important;
  }
  /* “vs” kolom di tengah biar tetap terlihat rapi */
  #matchesTable tbody td.text-center {
    font-weight: 600;
    opacity: .8;
  }
  /* tombol remove baris biar pindah ke kanan bawah kartu */
  #matchesTable tbody td:last-child {
    display: flex;
    justify-content: flex-end;
  }

  /* Recent Matches table -> stacked cards */
  #recentTable thead {
    display: none;
  }
  #recentTable tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: #fff;
  }
  #recentTable tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  /* Label kolom (pakai nth-child untuk bikin “label: value”) */
  #recentTable tbody td:nth-child(1)::before { content: "Date"; font-weight: 600; }
  #recentTable tbody td:nth-child(2)::before { content: "Team A"; font-weight: 600; }
  #recentTable tbody td:nth-child(3)::before { content: "Members A"; font-weight: 600; }
  #recentTable tbody td:nth-child(4)::before { content: "Score"; font-weight: 600; }
  #recentTable tbody td:nth-child(5)::before { content: "Team B"; font-weight: 600; }
  #recentTable tbody td:nth-child(6)::before { content: "Members B"; font-weight: 600; }

  /* rapihin angka skor biar tidak terlalu mepet */
  #recentTable tbody td:nth-child(4) span { display: inline-block; min-width: 1.25rem; text-align: center; }
}


/* Stack filter form on mobile for attendance log header */
@media (max-width: 576px) {
  .log-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  .log-filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
    width: 100%;
  }
  .log-filter-row > * {
    width: 100% !important;   /* select, month input, button full width */
  }
  .log-filter-row .btn {
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .table-log thead { display: none; }

  .table-log tbody tr:not(.is-empty) {
    display: block;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin: 8px 0;
    padding: 6px 10px;
  }
  .table-log tbody tr:not(.is-empty) td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 0 !important;
    padding: 10px 8px;
    white-space: normal;
    word-break: break-word;
  }
  .table-log tbody tr:not(.is-empty) td + td {
    border-top: 1px solid #f1f3f5 !important;
  }
  .table-log tbody tr:not(.is-empty) td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #495057;
    flex: 0 0 42%;
    max-width: 42%;
  }

  .table-log tbody tr.is-empty td {
    display: block;
    width: 100%;
    text-align: center;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 14px 12px;
    margin: 6px 0;
  }
}