/* Start Font - move to own file if there's more */
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Light.ttf') format('truetype'),
       url('/fonts/Gilroy-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Heavy.ttf') format('truetype'),
       url('/fonts/Gilroy-ExtraBold.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* End Font */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 700;
}

.light-text {
  font-weight: 300;
}

.medium-text {
  font-weight: 500;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }
  
  thead {
    background-color: #008A6B;
    color: white;
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  
  tbody {
    display: block;
    max-height: calc(13 * 43px); /* calc(# rows * 43px) to accommodate # rows */
    overflow-y: auto;
  }
  
  thead tr, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  
  th {
    /* white-space: nowrap; */
    overflow: hidden;
    /* text-overflow: ellipsis; */
  }
  
  th, td {
    padding: 12px;
    text-align: left;
  }

  
  th:first-child, td:first-child { padding-left: 20px; }
  th:last-child, td:last-child { padding-right: 20px; }
  
  tbody tr:nth-child(even) { background-color: #f2f2f2;} /* lt grey: #f2f2f2;  opacity: 0.7; */
  tbody tr:nth-child(odd) { background-color: #ffffff;} /* whilte: #ffffff;  opacity: 0.7; */
  tbody tr { color: #333; }
  
  tbody tr:hover {
    background-color: rgba(17, 152, 121, 0.3);
  }

  th:nth-child(1), td:nth-child(1) { width: 15%; min-width: 50px; }
  th:nth-child(2), td:nth-child(2) { width: 30%; }
  th:nth-child(3), td:nth-child(3) { width: 25%; min-width: 100px; }
  th:nth-child(4), td:nth-child(4) { width: 30%; min-width: 150px; text-align: right;}
  
  .table-container {
    position: relative;
    margin-bottom: 5px;
    overflow: hidden;
  }

/* Background */
  .svg-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.svg-left, .svg-right {
    position: absolute;
    top: 0;
    height: 100%;
    /* width: 50%; */
    object-fit: cover;
    /* mix-blend-mode: multiply; */
}

.svg-left {
    left: 0;
    z-index: -1;
}

.svg-right {
    right: 0;
    z-index: -2;
    width: 50%;
}
/* */

/* Leaderboard */
  
  #leaderboard {
    margin-bottom: 5px;
  }

  #leaderboard-container {
    position: relative;
    z-index: 5;
    min-height: 100vh; /* Ensure it takes at least the full height of the viewport */
    padding: 18px;
    box-sizing: border-box; /* Include padding in the element's total width and height */
}
  
  #last-updated {
    font-size: 12px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 5px;
    /* background-color: rgba(0, 0, 0, 0.1); */
    border-radius: 4px;
  }

  
  .contest-rules {
    margin-top: 15px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
  }


  /* Phone Filter */
  .filter-container {
    width: 97%;
    margin-bottom: 5px;
  }
  
  #phone-filter {
    width: 100%;
    padding: 8px;
    font-size: 18px;
    font-family: 'Gilroy', sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  
  #phone-filter:focus {
    outline: none;
    border-color: #008A6B;
    box-shadow: 0 0 5px rgba(0, 138, 107, 0.5);
  }
  
  #phone-filter::placeholder {
    color: #999;
  }
  
  #phone-filter::-webkit-inner-spin-button,
  #phone-filter::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  #phone-filter {
    -moz-appearance: textfield;
  }

  .filter-results {
    text-align: center; 
    padding: 20px; 
    /* color: #008A6B; */
    font-weight: 500;
  }

/* Start Main Logo */
#logo-container {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 4;
}

#logo-container img {
  opacity: 0.8;
}

#logo-container img:hover {
    opacity: 1;
}

#logo {
  max-width: 80px;
  height: auto;
  opacity: 0.9;
  transition: max-width 0.3s ease;
}

#logo:hover {
  opacity: 1;
}
/* End Main Logo */



/* Start Campaign Header */
  #header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
  }

  #header-row > div {
    display: flex;
    align-items: center;
    width: 100%;
  }

  #header-row h1 {
    margin: 5px 0;
    font-size:1.5em;
    text-shadow: 2px 2px 4px rgba(54, 54, 54, 0.373);
    opacity: 0.9;
  }

  #fixed-header {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  #fixed-header h1 {
    font-size: 1.2em;
  }

  #pejuang-hijau-logo {
    max-width: 250px;
    height: auto;
    margin-right: 10px;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  }

  .scoreboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 5px;
  }
  
  .timestamp {
    font-size: 12px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
  }
  
  .totals {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    text-align: right;
  }
  
  .totals .number {
    font-size: 22px;
    color: #82C55C;
  }

  /* .total-entries {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    text-align: right;
    padding: 3px;
    padding-left:5px;
    padding-right:5px;
    background-color: #82C55C;
    border-radius: 2px;
    
  } */

/* Rank icon styles */
.rank-gold::after,
.rank-silver::after,
.rank-bronze::after,
.rank-leaf::after,
.rank-seedling::after {
  margin-left: 5px;
  font-size: 1.2em;
  vertical-align: middle;
}

.rank-gold::after {
  content: ' 🥇';
  font-size: 1.4em;
}

.rank-silver::after {
  content: ' 🥈';
  font-size: 1.4em;
}

.rank-bronze::after {
  content: ' 🥉';
  font-size: 1.4em;
}

.rank-leaf::after {
  content: ' 🌿';
}

.rank-seedling::after {
  content: ' 🌱';
}

/* Start Sponsor */
#sponsor-logos {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  /* background-color: rgba(0, 0, 0, 0.3); */
  border-radius: 15px;
  padding: 4px 8px;
  max-width: calc(100% - 20px); /* Ensure it doesn't overflow the screen width */
  flex-wrap: nowrap; /* Prevent wrapping by default */
  width: auto; /* Ensure the width fits the content */
}

#sponsor-logos::before {
  content: "Sponsor:";
  font-size: 9px;
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.7);
  align-self: flex-start;
  padding-top: 2px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

#sponsor-logos img {
  max-width: 80px;
  height: auto;
  margin-left: 8px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

#sponsor-clickable-overlay {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 70px; /* Match max-width of sponsor logo image */
  height: 35px; /* Match max-height of sponsor logo image */
  z-index: 6; /* One level above the leaderboard */
  cursor: pointer;
}
/* End Sponsor */

/* Start emissions table */
.emissions-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 10px 0;
    border-radius: 5px;
    overflow: hidden;
    background-color: transparent;
    color: white;
    table-layout: fixed;
}

.emissions-table th, .emissions-table td {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    padding: 12px;
    text-align: left;
    overflow: hidden; /* Add this line to handle overflow */
    text-overflow: ellipsis; /* Add this line to show ellipsis for overflowing text */
    /* white-space: nowrap;  Add this line to prevent text wrapping */
}

  /* Define column widths */
.emissions-table th:nth-child(1),
.emissions-table td:nth-child(1) { width: 30%; } /* Moda */

.emissions-table th:nth-child(2),
.emissions-table td:nth-child(2) { width: 25%; } /* Emisi */

.emissions-table th:nth-child(3),
.emissions-table td:nth-child(3) { width: 45%; } /* Sumber */

.emissions-table th {
    font-weight: bold;
    background-color: rgba(29, 180, 150, 0.4);
}

.emissions-table tr:nth-child(even) {
    background-color: rgba(29, 180, 150, 0.05);
}

.emissions-table tr:nth-child(odd) { 
    background-color: rgba(29, 180, 150, 0.05);
}

.emissions-table tr:hover {
    background-color: rgba(29, 180, 150, 0.1);
}

.notes {
    font-size: 12px;
    padding: 0 15px;
}

#social-icons {
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
  border-radius: 15px; /* Rounded corners */
  padding: 4px 8px;
}

#social-icons a {
  color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */
  font-size: 18px;
  margin: 0 4px;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

#social-icons a:hover {
  color: rgba(255, 255, 255, 1); /* Fully opaque white on hover */
  transform: scale(1.1);
}

.copyright {
  color: rgba(255, 255, 255, 0.9);
  text-align:center; 
  font-size:10px;
}
  
@media screen and (max-width: 768px) {
    #leaderboard-container {
      width: 90%;
      height: 80vh;
    }

    #logo {
      max-width: 55px;
    }

    #pejuang-hijau-logo {
      max-width: 200px;
    }

    #fixed-header h1 {
      font-size: 1.2em;
    }

    #header-row h1 {
      font-size: 1.2em;
    }

    #sponsor-logos {
      padding: 3px 6px;
      margin-right: 5px;
    }
  
    #sponsor-logos img {
      max-width: 60px;
    }
  
    #sponsor-logos::before {
      font-size: 8px;
    }

    #phone-filter {
      padding: 6px;
      font-size: 16px;
    }

    .timestamp {
      font-size: 10px;
      max-width: 60%;
    }
    
    .totals .number {
      font-size: 20px;
    }

    #social-icons {
      bottom: 5px;
      right: 5px; 
      padding: 3px 6px;
    }
  
    #social-icons a {
      font-size: 16px;
      margin: 0 3px;
    }

    .table-container { font-size: 14px; }
    th, td { padding: 10px 8px; }
    th:first-child, td:first-child { padding-left: 10px; }
    th:last-child, td:last-child { padding-right: 10px; }
  }
  
  @media screen and (max-width: 480px) {
    body { padding: 10px; }
    #leaderboard-container {
      width: 100%;
      height: 85vh;
      padding:10px;
    }
    .filter-container {
        width: 95%;
        margin-top: 8px;
      }

    #pejuang-hijau-logo {
      max-width: 170px;
    }

    #pejuang-hijau-logo img {
      margin-right: 5px;
    }
  
    #header-row h1 {
      font-size: 1em;
      margin: 0px;
    } 

    #logo {
      max-width: 50px;
    }

    #social-icons {
      padding: 2px 4px;
    }

    #social-icons a {
      font-size: 14px;
      margin: 0 2px;
    }

    #phone-filter {
      padding: 4px;
      font-size: 14px;
    }

    .timestamp {
      font-size: 9px;
      max-width: 50%;
    }
    
    .totals .number {
      font-size: 16px;
    }

    #sponsor-logos {
      max-width: 40%; /* Limit width on very small screens */
      background-color: transparent; /* Remove background color at smaller screens */
      flex-wrap: wrap; /* Allow wrapping at this breakpoint */
      justify-content: flex-end; /* Align items to the right */
      padding: 0; /* Remove padding when background is removed */
      margin-right: 2px;
    }
  
    #sponsor-logos img {
      max-width: 45px;
      margin-bottom: 2px;
    }

    #sponsor-logos::before {
      font-size: 7px;
      margin-right: 3px;
      color: rgba(255, 255, 255, 0.8);
    }

    .table-container { font-size: 12px; }
    th, td { padding: 4px 4px; }
    th:first-child, td:first-child { padding-left: 6px; }
    th:last-child, td:last-child { padding-right: 6px; }
    th:nth-child(1), td:nth-child(1) { width: 15%; } /* Adjusted width */
    th:nth-child(2), td:nth-child(2) { display: 30%; } /* Hide Nama column */
    th:nth-child(3), td:nth-child(3) { width: 20%; } /* Adjusted width */
    th:nth-child(4), td:nth-child(4) { width: 35%; } /* Adjusted width */
  }
  
  @media screen and (max-width: 320px) {
    .table-container { font-size: 11px; }
    th, td { padding: 4px 2px; }
    th:first-child, td:first-child { padding-left: 4px; }
    th:last-child, td:last-child { padding-right: 4px; }
    th:nth-child(1), td:nth-child(1) { width: 25%; } /* Adjusted width */
    th:nth-child(2), td:nth-child(2) { display: none; } /* Hide Nama column */
    th:nth-child(3), td:nth-child(3) { display: 30%; } /* Hide No. HP column */
    th:nth-child(4), td:nth-child(4) { width: 45%; } /* Adjusted width */
    
    #sponsor-logos img {
      max-width: 43px;
    }
  
    #sponsor-logos::before {
      font-size: 6px;
      margin-right: 0px;
    }

    .emissions-table {
      width: 100%;
      table-layout: fixed;
    }

    .emissions-table th,
    .emissions-table td {
      display: table-cell; /* Ensure cells are displayed */
    }

    .emissions-table th:nth-child(3),
    .emissions-table td:nth-child(3) { 
      display: none; /* Hide the third column (Sumber) */
    }
  
    .emissions-table th:nth-child(1),
    .emissions-table td:nth-child(1) { 
      width: 60%; /* Adjust Moda column width */
      display: table-cell;
    }
  
    .emissions-table th:nth-child(2),
    .emissions-table td:nth-child(2) { 
      width: 40%; /* Adjust Emisi column width */
      display: table-cell;
    }
  }