/* ===== SMART AUTO-HIDING SCROLLBAR (Facebook/LinkedIn style) ===== */
:root {
  --sb-width: 8px;
  --sb-thumb-color: rgba(1, 68, 33, 0.4);
  --sb-thumb-hover: rgba(1, 68, 33, 0.8);
  --sb-track: #ffffff;
}

/* Hide default scrollbar but keep functionality */
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track);
}

/* Base styles for Webkit */
::-webkit-scrollbar {
  width: var(--sb-width);
  height: var(--sb-width);
}

::-webkit-scrollbar-track {
  background: var(--sb-track);
}

::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.3s ease;
}

/* Hide thumb when not scrolling - controlled by JS class */
body:not(.is-scrolling) ::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Always show on hover of the scroll area */
::-webkit-scrollbar-thumb:hover,
body.is-scrolling ::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-hover);
  background-clip: content-box;
}

/* Smooth expansion on hover like modern apps */
::-webkit-scrollbar:hover {
  width: 10px;
}

/* Dashboard specific containers */
.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.messages-container::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb:active {
  background: rgba(1, 68, 33, 0.95);
  transform: scale(0.95);
}

::-webkit-scrollbar-corner {
  background: #ffffff;
  border-radius: 0 0 10px 0;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #014421 #ffffff;
}

/* Custom scrollbar for specific elements */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #016A33;
}

/* Horizontal scrollbar */
::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-track:horizontal {
  background: #ffffff;
}

::-webkit-scrollbar-thumb:horizontal {
  background: #014421;
}

::-webkit-scrollbar-thumb:horizontal:hover {
  background: #016A33;
}

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar for code blocks and pre elements */
pre::-webkit-scrollbar,
code::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

pre::-webkit-scrollbar-track,
code::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 3px;
}

pre::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 3px;
}

/* Scrollbar animations */
@keyframes scrollbarShine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Scrollbar pulse effect */
@keyframes scrollbarPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(1, 68, 33, 0.18);
  }
  50% {
    box-shadow: 0 2px 12px rgba(1, 68, 33, 0.28);
  }
}

::-webkit-scrollbar-thumb {
  animation: scrollbarPulse 3s ease-in-out infinite;
}

/* Hover pause animation */
::-webkit-scrollbar-thumb:hover {
  animation-play-state: paused;
}

/* Custom scrollbar for modals and overlays */
.modal::-webkit-scrollbar,
.overlay::-webkit-scrollbar,
.popup::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.modal::-webkit-scrollbar-track,
.overlay::-webkit-scrollbar-track,
.popup::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 8px;
}

.modal::-webkit-scrollbar-thumb,
.overlay::-webkit-scrollbar-thumb,
.popup::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 8px;
}

/* Scrollbar for sidebar navigation */
.sidebar::-webkit-scrollbar,
.nav::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.sidebar::-webkit-scrollbar-track,
.nav::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 3px;
}

/* Scrollbar for tables */
.table::-webkit-scrollbar,
.data-table::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table::-webkit-scrollbar-track,
.data-table::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 6px;
}

.table::-webkit-scrollbar-thumb,
.data-table::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 6px;
}

/* Scrollbar for forms */
.form::-webkit-scrollbar,
.form-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.form::-webkit-scrollbar-track,
.form-container::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 6px;
}

.form::-webkit-scrollbar-thumb,
.form-container::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 6px;
}

/* Scrollbar for chat and messages */
.chat::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.conversation::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.chat::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track,
.conversation::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 4px;
}

.chat::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
.conversation::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 4px;
}

/* Scrollbar for dashboard widgets */
.widget::-webkit-scrollbar,
.card::-webkit-scrollbar,
.panel::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.widget::-webkit-scrollbar-track,
.card::-webkit-scrollbar-track,
.panel::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 4px;
}

.widget::-webkit-scrollbar-thumb,
.card::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb {
  background: #014421;
  border-radius: 4px;
}

/* Keep light scrollbars even when the OS is in dark mode -
   Weurkico has no dark theme, dark tracks look broken on white containers. */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-track:horizontal,
  ::-webkit-scrollbar-corner {
    background: #ffffff;
  }

  * {
    scrollbar-color: #014421 #ffffff;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  ::-webkit-scrollbar-thumb {
    border: 2px solid #000;
    background: #014421;
  }
  
  ::-webkit-scrollbar-track {
    background: #fff;
    border: 1px solid #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb::before {
    animation: none;
  }
  
  ::-webkit-scrollbar-thumb {
    animation: none;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Print styles - hide scrollbars */
@media print {
  ::-webkit-scrollbar,
  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-corner {
    display: none;
  }
}