/* Kinetic Rider - Custom CSS (supplements Tailwind utilities) */

/* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #F0EAE0;
}

::-webkit-scrollbar-thumb {
  background: #B8AFA5;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #948A7F;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #B8AFA5 #F0EAE0;
}

/* ===== Sidebar Transitions ===== */
.sidebar {
  transition: transform 300ms ease-in-out;
}

.sidebar-overlay {
  transition: opacity 300ms ease-in-out;
}

/* ===== Main Content Transition ===== */
.main-content {
  transition: margin-left 300ms ease-in-out;
}

/* ===== Toast Animations ===== */
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.toast-enter {
  animation: toast-slide-in 300ms ease-out forwards;
}

.toast-exit {
  animation: toast-fade-out 200ms ease-in forwards;
}

/* ===== Loading Spinner ===== */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-overlay,
  .main-content {
    transition: none;
  }

  .toast-enter {
    animation: none;
    opacity: 1;
  }

  .toast-exit {
    animation: none;
  }

  .loading-spinner {
    animation: spin 3s linear infinite;
  }
}

/* ===== Print Styles ===== */
@media print {
  .sidebar,
  .sidebar-overlay,
  .sidebar-toggle,
  #toast-container {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
}