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

 /* === sortable-table helpers === */
th.sortable::after {
  content: "⇅";
  @apply text-gray-400 ml-1 inline-block;
}

th.sortable.active.asc::after  { content: "▲"; @apply text-subtle; }
th.sortable.active.desc::after { content: "▼"; @apply text-subtle; }

/*
 *= require trix_theme_override
 */

/* === Flowbite Datepicker dark mode overrides === */
/* Ensure the popup calendar is readable in dark theme */
.dark .datepicker-picker,
.dark .datepicker-dropdown {
  background-color: #1f2937; /* gray-800 */
  color: #e5e7eb;            /* gray-200 */
  border-color: #374151;     /* gray-700 */
}

.dark .datepicker-picker .datepicker-header,
.dark .datepicker-picker .datepicker-title,
.dark .datepicker-picker .datepicker-switch,
.dark .datepicker-picker .view-switch {
  color: #e5e7eb; /* gray-200 */
}

/* Month/Year title and prev/next arrows */
.dark .datepicker-picker .datepicker-controls .button,
.dark .datepicker-picker .prev-btn,
.dark .datepicker-picker .next-btn,
.dark .datepicker-picker .view-switch {
  color: #e5e7eb; /* gray-200 */
}

.dark .datepicker-picker .datepicker-controls .button svg,
.dark .datepicker-picker .prev-btn svg,
.dark .datepicker-picker .next-btn svg,
.dark .datepicker-picker .view-switch svg {
  color: #e5e7eb;            /* ensure icons follow text color */
  fill: currentColor;
}

.dark .datepicker-picker .datepicker-controls .button:hover,
.dark .datepicker-picker .prev-btn:hover,
.dark .datepicker-picker .next-btn:hover,
.dark .datepicker-picker .view-switch:hover {
  background-color: #374151; /* gray-700 */
}

.dark .datepicker-picker .datepicker-controls .button.disabled,
.dark .datepicker-picker .datepicker-controls .button:disabled {
  color: #6b7280; /* gray-500 */
}

.dark .datepicker-picker .datepicker-cell {
  color: #e5e7eb; /* gray-200 */
}

.dark .datepicker-picker .datepicker-cell:hover,
.dark .datepicker-picker .datepicker-cell.focused {
  background-color: #374151; /* gray-700 */
}

.dark .datepicker-picker .datepicker-cell.selected,
.dark .datepicker-picker .datepicker-cell.active {
  background-color: #2563eb; /* blue-600 */
  color: #ffffff;
}

.dark .datepicker-picker .datepicker-footer,
.dark .datepicker-picker .datepicker-controls,
.dark .datepicker-picker .days-of-week {
  border-color: #374151; /* gray-700 */
}