/* Bending Tracker - Dark Matte Theme Styles (Inspired by Image 1) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-dark: #16171d;
  --bg-card: #22252e;
  --bg-surface: #2b2e3a;
  --bg-hover: #2e323f;
  --border-matte: #363a49;
  --accent-blue: #0084ff;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-dark);
  color: #f1f5f9;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Enhanced Horizontal & Vertical Scrollbars for Easy Dragging */
.custom-scrollbar {
  scrollbar-width: auto;
  scrollbar-color: #4a4f63 #1a1c24;
  -webkit-overflow-scrolling: touch;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 9px;
  height: 10px; /* Thicker horizontal scrollbar for easy grabbing */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #181a22;
  border-radius: 8px;
  margin: 0 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #3e4354;
  border: 2px solid #181a22;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #0084ff;
  box-shadow: 0 0 10px rgba(0, 132, 255, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background: #0073e6;
}

/* Grab to Scroll Cursor States */
.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing !important;
  user-select: none !important;
}

/* Modal Transition */
.modal-backdrop-enter-active,
.modal-backdrop-leave-active {
  transition: opacity 0.2s ease;
}

.modal-backdrop-enter-from,
.modal-backdrop-leave-to {
  opacity: 0;
}

.modal-content-enter-active,
.modal-content-leave-active {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content-enter-from,
.modal-content-leave-to {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
}

/* Subtle glow utility */
.glow-blue {
  box-shadow: 0 0 20px -5px rgba(0, 132, 255, 0.4);
}

/* Date picker color scheme fix for dark mode */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) brightness(1.2);
  cursor: pointer;
}