/* Drop zone styles */
.drop-zone {
  transition: all 0.3s ease;
}

.drop-zone.drag-over {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.drop-zone.has-file {
  border-color: #10b981;
  background-color: #f0fdf4;
}

/* Sort button styles */
#btn-sort-date,
#btn-sort-views,
#btn-sort-rating {
  transition: all 0.2s ease;
}

#btn-sort-date:hover:not(.bg-blue-500),
#btn-sort-views:hover:not(.bg-blue-500),
#btn-sort-rating:hover:not(.bg-blue-500) {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

#btn-sort-date.bg-blue-500:hover,
#btn-sort-views.bg-blue-500:hover,
#btn-sort-rating.bg-blue-500:hover {
  background-color: #1d4ed8 !important; /* Darker blue on hover when active */
  border-color: #1d4ed8 !important;
}

/* Line clamp for mobile */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .md\:line-clamp-none {
    -webkit-line-clamp: unset;
    display: block;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Thumbnail full width on mobile */
  .card-thumbnail {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
  }

  /* Smaller text on mobile */
  .card-text {
    font-size: 0.75rem !important;
  }

  /* Modal adjustments */
  .modal-content {
    margin: 1rem !important;
    max-width: calc(100% - 2rem) !important;
  }

  /* Button adjustments */
  .btn-sm-mobile {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}

/* Rating dropdown styling */
select option {
  padding: 8px;
}

/* Stars in dropdown */
select option[value="1"] { color: #fbbf24; }
select option[value="2"] { color: #fbbf24; }
select option[value="3"] { color: #fbbf24; }
select option[value="4"] { color: #fbbf24; }
select option[value="5"] { color: #fbbf24; }

/* Scrollbar styling for horizontal scroll */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
}

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

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

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