@import "tailwindcss";

@import "./assets/main.css";

@custom-variant dark (&:where(.dark, .dark *));

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Smooth transitions for better mobile experience */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Focus styles for better accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

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

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

/* Enhanced responsive utilities */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Custom line clamp utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile-first button styles */
button {
  min-height: 44px; /* iOS recommended touch target */
}

@media (min-width: 1024px) {
  button {
    min-height: auto;
  }
}

/* Enhanced mobile card styles */
@media (max-width: 768px) {
  .card-mobile {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Reset any conflicting styles specifically for the app */
#app {
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Ensure body doesn't interfere with the layout */
body {
  display: block !important;
  place-items: unset !important;
}
