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

/* Global styles */
html {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure no unexpected scrollbars from containers */
* {
  box-sizing: border-box;
}

/* Main content area should take available space without forcing scrollbars */
main {
  min-height: calc(100vh - 80px);
  /* Subtract approximate header height */
}

/* Kanban board drag and drop styles - updated for design system */
.drag-over {
  box-shadow: 0 0 0 2px var(--color-accent);
  background-color: var(--color-accent-muted);
}

[data-kanban-target="card"]:hover {
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

[data-kanban-target="card"].dragging {
  opacity: 0.5;
  transform: rotate(1deg);
  z-index: 1000;
}

[data-kanban-target="column"] {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-kanban-target="column"].drag-over {
  background-color: var(--color-accent-muted);
  border: 2px dashed var(--color-accent);
}

/* Spotlight search styles */
#spotlight-search {
  backdrop-filter: blur(4px);
}

#spotlight-search .search-result.selected {
  background-color: var(--color-accent-muted);
  border-left: 2px solid var(--color-accent);
}

#spotlight-search .search-result:hover:not(.selected) {
  background-color: var(--color-bg-base);
}

#spotlight-search kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

[data-kanban-target="card"][draggable="true"] {
  cursor: pointer;
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rubric slider styles - updated for design system */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-sm);
}

.slider::-webkit-slider-thumb:hover {
  background: var(--color-accent-hover);
}

.slider::-moz-range-thumb:hover {
  background: var(--color-accent-hover);
}

.score-badge {
  transition: all 0.2s ease;
}