/* scrollbar.css — main-page (and Extended) scrollbar
   Track: body / #pageWrap background #353535
   Thumb + arrow buttons: MCC orange #ef5425
   Firefox: scrollbar-color only (no button styling in Firefox).
*/

html {
  scrollbar-width: auto;
  scrollbar-color: #ef5425 #353535;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: #353535;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner {
  background-color: #353535;
}

::-webkit-scrollbar-thumb {
  background-color: #ef5425;
  border: 2px solid #353535;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ff6a3d; /* slightly lighter */
}

::-webkit-scrollbar-thumb:active {
  background-color: #d4481c; /* slightly darker */
}

/* Orange arrow buttons (WebKit/Blink).
   Each button graphic is a single SVG (orange plate + light chevron)
   so the fill still shows if background-color is ignored.
   Hide the unused half of the double-button pair. */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement {
  display: block;
  width: 16px;
  height: 16px;
  background-color: #ef5425;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

::-webkit-scrollbar-button:hover,
::-webkit-scrollbar-button:single-button:hover {
  background-color: #ff6a3d;
}

::-webkit-scrollbar-button:active,
::-webkit-scrollbar-button:single-button:active {
  background-color: #d4481c;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
  height: 0;
  width: 0;
}

/* up */
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:single-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23ef5425'/%3E%3Cpolygon points='8,4 13,11 3,11' fill='%23f9f9f9'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:decrement:hover,
::-webkit-scrollbar-button:single-button:vertical:decrement:hover,
::-webkit-scrollbar-button:vertical:start:decrement:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23ff6a3d'/%3E%3Cpolygon points='8,4 13,11 3,11' fill='%23f9f9f9'/%3E%3C/svg%3E");
}

/* down */
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:single-button:vertical:increment,
::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23ef5425'/%3E%3Cpolygon points='3,5 13,5 8,12' fill='%23f9f9f9'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:increment:hover,
::-webkit-scrollbar-button:single-button:vertical:increment:hover,
::-webkit-scrollbar-button:vertical:end:increment:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23ff6a3d'/%3E%3Cpolygon points='3,5 13,5 8,12' fill='%23f9f9f9'/%3E%3C/svg%3E");
}

/* left */
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:single-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23ef5425'/%3E%3Cpolygon points='4,8 11,3 11,13' fill='%23f9f9f9'/%3E%3C/svg%3E");
}

/* right */
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-button:single-button:horizontal:increment,
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23ef5425'/%3E%3Cpolygon points='5,3 12,8 5,13' fill='%23f9f9f9'/%3E%3C/svg%3E");
}