/* =========================================
   Custom Scrollbar (light green) with real top/bottom buttons
   Only the html element scrolls to avoid duplicate bars.
   ========================================= */

/* Only html should scroll → prevents duplicate bars */
html{
  height:100%;
  overflow-y:scroll;           /* always show one vertical bar */
  scrollbar-gutter: stable;
  scrollbar-width: thin;       /* Firefox width */
  scrollbar-color: #8fe081 #0b2225;
  scroll-behavior: smooth;
}

/* WebKit scrollbar styling */
html::-webkit-scrollbar{ width: 14px; }
html::-webkit-scrollbar-track{
  background: #0b2225;
  border-radius: 999px;
}

/* Light-green thumb */
html::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #a7f08d, #56c84f);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #0b2225;
  transition: filter .2s ease, background .2s ease;
}
html::-webkit-scrollbar-thumb:hover{  filter: brightness(1.06); }
html::-webkit-scrollbar-thumb:active{ filter: brightness(1.12); }

/* Buttons — HARD RESET everything */
html::-webkit-scrollbar-button{
  -webkit-appearance: none;
  appearance: none;
  display:none !important;
  width:0; height:0;           /* make sure ghost buttons take no space */
  background:none !important;
  border:0 !important;
}

/* Explicitly hide every WebKit variant we DON'T want */
html::-webkit-scrollbar-button:single-button,
html::-webkit-scrollbar-button:vertical:decrement,
html::-webkit-scrollbar-button:vertical:increment,
html::-webkit-scrollbar-button:vertical:start:increment,
html::-webkit-scrollbar-button:vertical:end:decrement{
  display:none !important;
  width:0 !important; height:0 !important;
}

/* Enable ONLY the true top (start:decrement) and bottom (end:increment) */
html::-webkit-scrollbar-button:vertical:start:decrement,
html::-webkit-scrollbar-button:vertical:end:increment{
  display:block !important;
  width:auto; height:22px;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  transition: background-color .15s ease;
}

/* Top arrow icon */
html::-webkit-scrollbar-button:vertical:start:decrement{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eaf6fb'>\
    <path d='M7.41 14.59 12 10l4.59 4.59L18 13.17 12 7.17l-6 6z'/>\
  </svg>") !important;
}

/* Bottom arrow icon */
html::-webkit-scrollbar-button:vertical:end:increment{
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eaf6fb'>\
    <path d='M7.41 9.41 12 14l4.59-4.59L18 10.83 12 16.83l-6-6z'/>\
  </svg>") !important;
}

html::-webkit-scrollbar-button:vertical:start:decrement:hover,
html::-webkit-scrollbar-button:vertical:end:increment:hover{
  background-color: rgba(255,255,255,.16) !important;
}
html::-webkit-scrollbar-button:vertical:start:decrement:active,
html::-webkit-scrollbar-button:vertical:end:increment:active{
  background-color: rgba(255,255,255,.22) !important;
}

/* Corner filler */
html::-webkit-scrollbar-corner{ background:#0b2225; }