/* === SITE-WIDE SCROLLBAR STYLING === */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: #1fd5f9;
  border-radius: 5px;
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #00A3E0;
  box-shadow: 0 0 10px rgba(31, 213, 249, 0.5);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #1fd5f9 rgba(0, 0, 0, 0.1);
}

/* === LAYOUT FIXES === */
/* Ensure sidebar has proper spacing and doesn't get cut off */
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  color: var(--text-light);
  text-decoration: none;
  transition: all 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
  flex-shrink: 0;
  z-index: 1000;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.main {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
  background-color: #000;
  color: #eee;
  min-width: 0; /* Prevent flex item from overflowing */
}

/* Ensure CRM content doesn't overflow */
.crm-container {
  max-width: 100%;
  overflow-x: hidden;
}

/* === CRM HOVER EFFECTS === */
/* Enhanced hover effects for interactive elements */
.btn, .menu-item, .sidebar .toggle-btn, .form-control, .form-select, .card, .kpi-card, .chart-container {
  position: relative;
  transition: all 0.5s ease;
}

.btn:hover,
.menu-item:hover,
.sidebar .toggle-btn:hover,
.form-control:focus,
.form-select:focus,
.card:hover,
.kpi-card:hover,
.chart-container:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(31, 213, 249, 0.2);
}

/* Glow effect for interactive elements */
.btn::after,
.menu-item::after,
.sidebar .toggle-btn::after,
.form-control::after,
.form-select::after,
.card::after,
.kpi-card::after,
.chart-container::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle at center, rgba(31, 213, 249, 0.3), transparent);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.btn:hover::after,
.menu-item:hover::after,
.sidebar .toggle-btn:hover::after,
.form-control:focus::after,
.form-select:focus::after,
.card:hover::after,
.kpi-card:hover::after,
.chart-container:hover::after {
  opacity: 0.15;
}

/* Table hover effects - fixed horizontal scrollbar issue */
.data-table tbody tr {
  transition: all 0.5s ease;
  overflow: hidden;
}

.data-table tbody tr:hover {
  background: rgba(22, 25, 39, 0.8) !important;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(31, 213, 249, 0.15);
}

/* KPI card specific hover effects - softer */
.kpi-card {
  transition: all 0.5s ease;
}

.kpi-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.kpi-card:hover .kpi-background {
  background: linear-gradient(45deg, rgba(32, 213, 249, 0.08), rgba(185, 103, 255, 0.08));
  transition: background 0.5s ease;
}

/* Chart container hover effects - softer */
.chart-container {
  transition: all 0.5s ease;
}

.chart-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(31, 213, 249, 0.15);
}

/* Form elements hover effects - softer */
.form-control:hover,
.form-select:hover {
  border-color: rgba(32, 213, 249, 0.6);
  box-shadow: 0 0 0 0.1rem rgba(32, 213, 249, 0.15);
  transition: all 0.5s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(32, 213, 249, 0.8) !important;
  box-shadow: 0 0 0 0.2rem rgba(32, 213, 249, 0.2) !important;
  transition: all 0.5s ease;
}

/* Button hover effects - softer */
.btn {
  transition: all 0.5s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* Sidebar menu item hover effects - softer */
.sidebar .menu-item {
  transition: all 0.5s ease;
}

.sidebar .menu-item:hover {
  background: linear-gradient(90deg, rgba(31, 213, 249, 0.08) 0%, transparent 100%);
  color: var(--accent-color);
  border-left-color: var(--accent-color);
  transform: translateX(2px);
}

.sidebar .menu-item:hover i {
  color: var(--accent-hover);
  transform: scale(1.05);
  transition: all 0.5s ease;
}

/* === CUSTOM CURSOR SYSTEM - ONLY FOR HOMEPAGE === */
/* Custom cursor styles - only apply when custom cursor is active */
body.custom-cursor-active .custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #20D5F9 0%, rgba(32, 213, 249, 0.8) 70%, transparent 100%);
  border: 2px solid rgba(32, 213, 249, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

body.custom-cursor-active .custom-cursor-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  background: rgba(32, 213, 249, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

/* Cursor states - only when custom cursor is active */
body.custom-cursor-active .custom-cursor.hover {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #20D5F9 0%, rgba(32, 213, 249, 0.9) 70%, transparent 100%);
  border-color: rgba(32, 213, 249, 0.5);
}

body.custom-cursor-active .custom-cursor.click {
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #20D5F9 0%, rgba(32, 213, 249, 1) 70%, transparent 100%);
  border-color: rgba(32, 213, 249, 0.8);
}

body.custom-cursor-active .custom-cursor.text-select {
  width: 2px;
  height: 20px;
  background: #20D5F9;
  border: none;
  border-radius: 0;
}

/* Hide default cursor ONLY when custom cursor is active */
body.custom-cursor-active {
  cursor: none !important;
}

body.custom-cursor-active * {
  cursor: none !important;
}

/* Ensure cursor is visible on interactive elements when custom cursor is active */
body.custom-cursor-active a:hover,
body.custom-cursor-active button:hover,
body.custom-cursor-active input:hover,
body.custom-cursor-active select:hover,
body.custom-cursor-active textarea:hover {
  cursor: none !important;
}

/* Cursor toggle button - only show on homepage */
.cursor-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(32, 213, 249, 0.1);
  border: 1px solid #20D5F9;
  color: #20D5F9;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.cursor-toggle-btn:hover {
  background: rgba(32, 213, 249, 0.2);
  transform: translateY(-1px);
}

.cursor-toggle-btn.active {
  background: #20D5F9;
  color: #1e2235;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body.custom-cursor-active .custom-cursor,
  body.custom-cursor-active .custom-cursor-trail {
    display: none !important;
  }
  
  body.custom-cursor-active {
    cursor: auto !important;
  }
  
  body.custom-cursor-active * {
    cursor: auto !important;
  }
  
  .cursor-toggle-btn {
    display: none;
  }
}