/* ===== CUSTOM SCROLLBAR ===== */

/* Webkit Browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #f0f4f0 0%, #e8efe8 100%);
  border-left: 1px solid #ddd;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4caf50 0%, #2e7d32 50%, #1b5e20 100%);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66bb6a 0%, #43a047 50%, #2e7d32 100%);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #388e3c 0%, #2e7d32 50%, #1b5e20 100%);
}

::-webkit-scrollbar-corner {
  background: #e8efe8;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #2e7d32 #f0f4f0;
}

/* ===== FANCY SCROLLBAR WITH GLOW EFFECT ===== */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: #2e7d32 #f0f4f0;
    scrollbar-width: thin;
  }
}

/* Scrollbar for specific containers */
.auth-form-container::-webkit-scrollbar,
.report-form-wrapper::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.auth-form-container::-webkit-scrollbar-track,
.report-form-wrapper::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

.auth-form-container::-webkit-scrollbar-thumb,
.report-form-wrapper::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #81c784 0%, #4caf50 50%, #388e3c 100%);
  border-radius: 10px;
}

/* ===== SCROLL PROGRESS INDICATOR ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(
    90deg,
    #4caf50 0%,
    #8bc34a 25%,
    #cddc39 50%,
    #ffeb3b 75%,
    #ff9800 100%
  );
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.7), 0 0 20px rgba(76, 175, 80, 0.5);
}

/* Alternative: Single color progress bar */
.scroll-progress.simple {
  background: linear-gradient(90deg, #2e7d32 0%, #4caf50 100%);
}

/* ===== ANIMATED SCROLLBAR GLOW ===== */
@keyframes scrollbarGlow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.8), 0 0 25px rgba(76, 175, 80, 0.4);
  }
}

::-webkit-scrollbar-thumb {
  animation: scrollbarGlow 2s ease-in-out infinite;
}

/* ===== HIDE SCROLLBAR BUT KEEP FUNCTIONALITY ===== */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* ===== THIN ELEGANT SCROLLBAR ===== */
.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(46, 125, 50, 0.5);
  border-radius: 3px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(46, 125, 50, 0.8);
}

/* ===== RESPONSIVE SCROLLBAR ===== */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 8px;
  }

  .scroll-progress {
    height: 3px;
  }
}

@media (max-width: 480px) {
  ::-webkit-scrollbar {
    width: 6px;
  }

  .scroll-progress {
    height: 2px;
  }
}