/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Internal comments - light green background */
.comment-internal {
  background-color: #dcfce7; /* green-100 */
  border-left: 3px solid #22c55e; /* green-500 */
}

.dark .comment-internal {
  background-color: rgba(22, 101, 52, 0.2); /* green-900/20 */
  border-left: 3px solid #16a34a; /* green-600 */
}

/* Comment highlight animation for new comments via Turbo */
.comment-highlight {
  background-color: #fef9c3; /* yellow-100 */
  border-left: 3px solid #eab308; /* yellow-500 */
  transition: background-color 1s ease-out, border-left-color 1s ease-out;
}

.dark .comment-highlight {
  background-color: rgba(113, 63, 18, 0.3); /* yellow-900/30 */
  border-left: 3px solid #ca8a04; /* yellow-600 */
}

.comment-highlight-fade {
  background-color: transparent;
  border-left-color: transparent;
}

/* New ticket flash animation in dashboard */
@keyframes new-ticket-flash {
  0% { background-color: #fef9c3; }
  100% { background-color: transparent; }
}

.ticket-new {
  animation: new-ticket-flash 3s ease-out;
}

/* Pagy pagination styling */
.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy.series-nav a {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  text-decoration: none;
}

.pagy.series-nav a:hover {
  background: #f9fafb;
}

.pagy.series-nav a[aria-current="page"] {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
  font-weight: 500;
}

.pagy.series-nav a[aria-disabled="true"] {
  border: none;
  color: #9ca3af;
  cursor: default;
  pointer-events: none;
}

/* Dark mode overrides for pagy */
.dark .pagy.series-nav a {
  background: #1e293b; /* slate-800 */
  border-color: #475569; /* slate-600 */
  color: #cbd5e1; /* slate-300 */
}

.dark .pagy.series-nav a:hover {
  background: #334155; /* slate-700 */
}

.dark .pagy.series-nav a[aria-current="page"] {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.dark .pagy.series-nav a[aria-disabled="true"] {
  color: #64748b; /* slate-500 */
}