/* Base Styles & Overrides */
body {
  font-family: 'Inter', sans-serif;
}

/* Custom Webkit Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #2B2838; /* gl-gray-5 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #45424D; /* gl-gray-4 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #74717A; /* gl-gray-3 */
}

/* Loader Animation */
.loader {
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #FC6D26; /* gl-orange-2 */
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Board specific styling */
.kanban-column {
  /* Give columns a fixed width so they don't stretch */
  width: 24rem; /* 384px */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.kanban-column-list {
  /* Scrollable area inside the column for cards */
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  /* subtle inner shadow to indicate scroll area if needed */
}

/* Card Styling */
.mr-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  cursor: grab;
}

.mr-card:active {
  cursor: grabbing;
}

.mr-card:hover {
  border-color: #A989F5; /* gl-purple-1 */
  box-shadow: 0 0 0 1px rgba(169, 137, 245, 0.3), 0 0 12px rgba(169, 137, 245, 0.15);
}

/* New MR highlight */
.new-mr {
  border-color: #FC6D26 !important; /* gl-orange-2 */
  box-shadow: 0 0 0 1px rgba(252, 109, 38, 0.3), 0 0 12px rgba(252, 109, 38, 0.15);
}

/* New comments highlight */
.new-comments {
  background-color: #FC6D26 !important; /* gl-orange-2 */
  color: white !important;
  animation: pulse-comment 2s ease-in-out infinite;
}

@keyframes pulse-comment {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* SortableJS Ghost & Drag classes */
.sortable-ghost {
  opacity: 0.4;
  background-color: #45424D; /* gl-gray-4 */
  border: 2px dashed #74717A; /* gl-gray-3 */
}

.sortable-drag {
  opacity: 1 !important;
  transform: rotate(2deg) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  z-index: 100 !important;
}

/* Pipeline Status Colors — using GitLab teal for success */
.status-success { color: #10B1B1; } /* gl-teal-3 */
.status-failed { color: #E24329; }  /* gl-orange-3 (GitLab red-orange) */
.status-running { color: #7759C2; } /* gl-purple-2 */
.status-pending { color: #FCA326; } /* gl-orange-1 */
.status-canceled { color: #74717A; } /* gl-gray-3 */

.spin-slow {
  animation: spin 2s linear infinite;
}

/* Dependency Drop target highlight */
.drop-target {
  border-color: #A989F5 !important; /* gl-purple-1 */
  background-color: rgba(121, 89, 194, 0.1) !important; /* gl-purple-2 at 10% */
  transform: scale(1.02);
}

/* Toggle active state styling */
input:checked + i.draft-icon::before {
  content: "\ea86"; /* ri-eye-line equivalent */
  color: #FC6D26; /* gl-orange-2 */
}
input:checked + i.deps-icon::before {
  color: #FC6D26; /* gl-orange-2 */
}
input:checked ~ span {
  color: #FC6D26; /* gl-orange-2 */
}

/* Collapsed Column */
.kanban-column.collapsed {
  width: 48px !important;
  min-width: 48px;
  cursor: pointer;
}

.kanban-column.collapsed .column-header {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  border-bottom: none;
  border-radius: 0.75rem;
  padding: 1rem 0.5rem;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 200px;
  cursor: pointer;
}

.kanban-column.collapsed .column-header h3 {
  white-space: nowrap;
}

.kanban-column.collapsed .col-count {
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kanban-column.collapsed .kanban-column-list {
  display: none;
}

.kanban-column.collapsed .delete-col-btn {
  display: none;
}

/* Context Menu */
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #D1D0D3; /* gl-gray-1 */
  transition: background-color 0.15s, color 0.15s;
}

.context-menu-item:hover {
  background-color: #45424D; /* gl-gray-4 */
  color: #FC6D26; /* gl-orange-2 */
}

.context-menu-item.active {
  color: #FC6D26; /* gl-orange-2 */
  font-weight: 600;
}