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

/* Fix cursor pointer on buttons and submit inputs */
.cursor-pointer,
button.cursor-pointer,
input[type="submit"].cursor-pointer,
.btn.cursor-pointer {
  cursor: pointer !important;
}

/* Fix button_to forms in flex containers */
.button_to {
  display: inline-block;
  margin: 0;
}

.button_to button {
  cursor: pointer;
}

/* Toast notification animation */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-fade-in-out {
  animation: fadeInOut 2.5s ease-in-out;
}

/* SortableJS drag & drop */
.sortable-ghost {
  opacity: 0.4;
  background: #e0e7ff;
}

.dark .sortable-ghost {
  background: #3730a3; /* indigo-800 */
}

.sortable-drag {
  cursor: grabbing !important;
}

.hierarchy-note-item {
  cursor: pointer;
}

.hierarchy-note-item:hover {
  background-color: #eff6ff; /* blue-50 */
  border-left: 2px solid #93c5fd; /* blue-300 */
}

.dark .hierarchy-note-item:hover {
  background-color: #374151; /* gray-700 */
  border-left-color: #60a5fa; /* blue-400 */
}

.hierarchy-item:hover {
  background-color: #f9fafb; /* gray-50 */
}

.dark .hierarchy-item:hover {
  background-color: #1f2937; /* gray-800 */
}

/* Drop zone highlighting */
.hierarchy-list,
.hierarchy-children {
  min-height: 10px;
  transition: background-color 0.2s, border-color 0.2s;
  border-radius: 4px;
  padding: 2px;
}

.hierarchy-children {
  min-height: 20px;
}

.hierarchy-list:empty::before,
.hierarchy-children:empty::before {
  content: "Drop note here";
  display: block;
  padding: 8px;
  color: #9ca3af;
  font-size: 0.75rem;
  text-align: center;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
}

.dark .hierarchy-list:empty::before,
.dark .hierarchy-children:empty::before {
  color: #6b7280;
  border-color: #4b5563;
}

/* Highlight on drag over */
.hierarchy-list.sortable-drag-over,
.hierarchy-children.sortable-drag-over {
  background-color: #dbeafe; /* blue-100 */
  border: 2px dashed #3b82f6; /* blue-500 */
}

.dark .hierarchy-list.sortable-drag-over,
.dark .hierarchy-children.sortable-drag-over {
  background-color: #1e3a5f; /* dark blue */
  border-color: #60a5fa; /* blue-400 */
}

/* Make empty children containers visible when dragging */
.hierarchy-children.drag-active {
  display: block !important;
  opacity: 0.6;
  background-color: #fef3c7; /* yellow-100 */
  border: 1px dashed #f59e0b; /* yellow-500 */
  min-height: 30px;
}

.dark .hierarchy-children.drag-active {
  background-color: #78350f; /* yellow-900 */
  border-color: #fbbf24; /* yellow-400 */
}

/* Override DaisyUI label-text color in dark mode */
.dark .label-text {
  color: #f3f4f6 !important; /* gray-100 */
}

/* Override TOC link colors in dark mode (JS generated links) */
.dark .table-of-contents a.link,
.dark .table-of-contents .toc-link,
.dark .toc-link {
  color: #e5e7eb !important; /* gray-200 */
}

.dark .table-of-contents a.link:hover,
.dark .table-of-contents .toc-link:hover,
.dark .toc-link:hover {
  color: #60a5fa !important; /* blue-400 */
}