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

/* --- Base Scrollbar (WebKit) --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #94a3b8, #64748b);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #64748b, #475569);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Horizontal scrollbar thumb */
::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(90deg, #94a3b8, #64748b);
  min-width: 40px;
}

::-webkit-scrollbar-thumb:horizontal:hover {
  background: linear-gradient(90deg, #64748b, #475569);
}

/* --- Firefox Scrollbar --- */
* {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 rgba(0, 0, 0, 0.03);
}

/* --- Scrollable Containers Enhancement --- */
.scrollbar-sm::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-sm::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
}

.scrollbar-lg::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.scrollbar-lg::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================
   DARK THEME SCROLLBAR
   ============================================ */

[data-pc-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

[data-pc-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #475569, #334155);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-pc-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #64748b, #475569);
}

[data-pc-theme="dark"] ::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(90deg, #475569, #334155);
}

[data-pc-theme="dark"] ::-webkit-scrollbar-thumb:horizontal:hover {
  background: linear-gradient(90deg, #64748b, #475569);
}

[data-pc-theme="dark"] * {
  scrollbar-color: #475569 rgba(255, 255, 255, 0.02);
}

/* ============================================
   COLORED SCROLLBAR VARIANTS
   ============================================ */

/* Primary (Blue) */
.scrollbar-primary::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.scrollbar-primary::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
}

[data-pc-theme="dark"] .scrollbar-primary::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
}

[data-pc-theme="dark"] .scrollbar-primary::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}

/* Success (Green) */
.scrollbar-success::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #10b981, #059669);
}

.scrollbar-success::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #059669, #047857);
}

[data-pc-theme="dark"] .scrollbar-success::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #34d399, #10b981);
}

[data-pc-theme="dark"] .scrollbar-success::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #10b981, #059669);
}

/* Danger (Red) */
.scrollbar-danger::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ef4444, #dc2626);
}

.scrollbar-danger::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #dc2626, #b91c1c);
}

[data-pc-theme="dark"] .scrollbar-danger::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f87171, #ef4444);
}

[data-pc-theme="dark"] .scrollbar-danger::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ef4444, #dc2626);
}

/* Warning (Amber) */
.scrollbar-warning::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

.scrollbar-warning::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d97706, #b45309);
}

[data-pc-theme="dark"] .scrollbar-warning::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

[data-pc-theme="dark"] .scrollbar-warning::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f59e0b, #d97706);
}

/* Purple */
.scrollbar-purple::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
}

.scrollbar-purple::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7c3aed, #6d28d9);
}

[data-pc-theme="dark"] .scrollbar-purple::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a78bfa, #8b5cf6);
}

[data-pc-theme="dark"] .scrollbar-purple::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
}

/* Pink */
.scrollbar-pink::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ec4899, #db2777);
}

.scrollbar-pink::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #db2777, #be185d);
}

[data-pc-theme="dark"] .scrollbar-pink::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f472b6, #ec4899);
}

[data-pc-theme="dark"] .scrollbar-pink::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ec4899, #db2777);
}

/* ============================================
   SCROLLBAR FOR SPECIFIC ELEMENTS
   ============================================ */

/* Sidebar / Navigation scrollbars */
.sidebar,
.pc-sidebar,
.nav-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sidebar::-webkit-scrollbar,
.pc-sidebar::-webkit-scrollbar,
.nav-sidebar::-webkit-scrollbar {
  width: 5px;
}

.sidebar::-webkit-scrollbar-track,
.pc-sidebar::-webkit-scrollbar-track,
.nav-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.pc-sidebar::-webkit-scrollbar-thumb,
.nav-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 100px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.pc-sidebar::-webkit-scrollbar-thumb:hover,
.nav-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Dark theme sidebar */
[data-pc-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-pc-theme="dark"] .pc-sidebar::-webkit-scrollbar-thumb,
[data-pc-theme="dark"] .nav-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
}

[data-pc-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
[data-pc-theme="dark"] .pc-sidebar::-webkit-scrollbar-thumb:hover,
[data-pc-theme="dark"] .nav-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Card body scrollbars */
.card-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.card-body::-webkit-scrollbar {
  width: 6px;
}

.card-body::-webkit-scrollbar-track {
  background: transparent;
}

.card-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 100px;
}

.card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-pc-theme="dark"] .card-body {
  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

[data-pc-theme="dark"] .card-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
}

[data-pc-theme="dark"] .card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Table container scrollbars */
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 100px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-pc-theme="dark"] .table-responsive {
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

[data-pc-theme="dark"] .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-pc-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Modal body scrollbars */
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 100px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-pc-theme="dark"] .modal-body {
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

[data-pc-theme="dark"] .modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
}

[data-pc-theme="dark"] .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Code block / Pre scrollbars */
pre,
code,
.hljs {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

pre::-webkit-scrollbar,
code::-webkit-scrollbar,
.hljs::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

pre::-webkit-scrollbar-track,
code::-webkit-scrollbar-track,
.hljs::-webkit-scrollbar-track {
  background: transparent;
}

pre::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb,
.hljs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 100px;
}

pre::-webkit-scrollbar-thumb:hover,
code::-webkit-scrollbar-thumb:hover,
.hljs::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

[data-pc-theme="dark"] pre,
[data-pc-theme="dark"] code,
[data-pc-theme="dark"] .hljs {
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

[data-pc-theme="dark"] pre::-webkit-scrollbar-thumb,
[data-pc-theme="dark"] code::-webkit-scrollbar-thumb,
[data-pc-theme="dark"] .hljs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

[data-pc-theme="dark"] pre::-webkit-scrollbar-thumb:hover,
[data-pc-theme="dark"] code::-webkit-scrollbar-thumb:hover,
[data-pc-theme="dark"] .hljs::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   SMOOTH SCROLL BEHAVIOR
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* Smooth scroll for specific containers */
.smooth-scroll {
  scroll-behavior: smooth;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .smooth-scroll {
    scroll-behavior: auto;
  }
  
  ::-webkit-scrollbar-thumb {
    transition: none;
  }
}