/*
 * 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;
}

/* <turbo-frame> är ett okänt element och renderas som INLINE om ingen regel
   säger annat — appen hade ingen. Följden: framar tar inte margin (space-y
   fungerade inte på broadcastade kommentarer) och kan inte bära box-geometri.
   Turbos egen dokumentation rekommenderar den här regeln. */
turbo-frame {
  display: block;
}

/* #989: nyanländ kommentar via broadcast — ring som tonar bort efter några
   sekunder, så man ser ATT något kom in.

   Ringen sitter på KORTET, inte på framen. Kortet är innehåll och överlever
   frame-bytet; framens attribut gör inte det. På framen blev ringen dessutom
   fel geometriskt — den syntes bara vid hörnen, eftersom det opaka kortet
   ligger ovanpå överallt utom där de rundade hörnen kröker undan.

   Ring i stället för bakgrund: kortet har egen bg-white / dark:bg-slate-800,
   och en bakgrundshighlight hade tonat till transparent och lämnat kortet utan
   botten. Amber enligt designkompassen — uppmärksamhet, inte fel. */
.comment-arrived {
  /* INSET, inte utanpåliggande. Kommentarslistan är max-h + overflow-y-auto,
     och när en axel inte är `visible` blir den andra `auto` enligt spec — så
     containern klipper även horisontellt. Kortet är w-full, så en utanpåliggande
     ring klipptes på vänster, höger och topp; kvar blev bara undersidan, där
     space-y-4 gav marginal.

     En inset-ring ritas innanför kortets kant och kan inte klippas av något
     utanför. */
  box-shadow: inset 0 0 0 2px #fbbf24; /* amber-400 */
  transition: box-shadow 1.2s ease-out;
}

.comment-arrived-fade {
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 1.2s ease-out;
}

/* 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 */
}