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

/* Sidebar transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Ensure smooth width transitions */
.w-20 {
  width: 5rem;
}

.w-80 {
  width: 20rem;
}

/* Rotation for toggle button */
.rotate-180 {
  transform: rotate(180deg);
}

/* Sortable drag-and-drop styles */
.sortable-ghost {
  opacity: 0.3;
}

.sortable-chosen {
  cursor: grabbing;
}

.sortable-drag {
  transform: rotate(5deg);
}

.sortable-item {
  cursor: grab;
}

.sortable-item:active {
  cursor: grabbing;
}

/* Table of Contents active state styles */
nav[data-controller="toc"] a.active {
  background-color: rgb(238 242 255); /* indigo-100 */
  color: rgb(67 56 202); /* indigo-600 */
  font-weight: 600;
}

nav[data-controller="toc"] a.active span:first-child {
  background-color: rgb(99 102 241); /* indigo-500 */
  color: white;
}

/* Mobile TOC active state */
@media (max-width: 1023px) {
  nav[data-controller="toc"] a.active {
    background-color: rgb(79 70 229); /* indigo-600 */
    color: white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
  
  nav[data-controller="toc"] a.active span:first-child {
    background-color: white;
    color: rgb(79 70 229); /* indigo-600 */
  }
  
  nav[data-controller="toc"] a.active span:last-child {
    color: white;
  }
}