/* Utility Classes */
/* Common utility classes used across the application */

/* --- Spacing Utilities --- */
.gap-0-5 {
  gap: 0.5rem !important;
}

.gap-1-5 {
  gap: 1.5rem !important;
}

.gap-2-5 {
  gap: 2.5rem !important;
}

/* --- Text Utilities --- */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.pre-wrap {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.text-on-accent {
  color: white !important;
}

/* --- Sizing Utilities --- */
.min-w-0 {
  min-width: 0 !important;
}

.min-vh-10 {
  min-height: 10vh !important;
}

.max-w-sm {
  max-width: 540px !important;
}

.max-w-md {
  max-width: 720px !important;
}

.max-w-lg {
  max-width: 960px !important;
}

.max-w-xl {
  max-width: 1140px !important;
}

/* --- Overflow Utilities --- */
.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

/* --- Display Utilities --- */
.d-grid {
  display: grid !important;
}

/* --- Flexbox Utilities --- */
.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

/* --- Position Utilities --- */
.position-sticky {
  position: sticky !important;
  top: 0;
  z-index: 1020;
}

/* --- Cursor Utilities --- */
.cursor-pointer {
  cursor: pointer !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.cursor-grab {
  cursor: grab !important;
}

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

/* --- User Select Utilities --- */
.user-select-none {
  user-select: none !important;
}

.user-select-all {
  user-select: all !important;
}

/* --- Opacity Utilities --- */
.opacity-10 {
  opacity: 0.1 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-90 {
  opacity: 0.9 !important;
}

/* --- Avatar Utilities --- */
.avatar-sm {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
}

.avatar-md {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 500;
  flex-shrink: 0;
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* --- User Color Classes (for avatars) --- */
.user-color-0 {
  background-color: #e3f2fd !important;
  color: #1976d2 !important;
}

.user-color-1 {
  background-color: #f3e5f5 !important;
  color: #7b1fa2 !important;
}

.user-color-2 {
  background-color: #e8f5e9 !important;
  color: #388e3c !important;
}

.user-color-3 {
  background-color: #fff3e0 !important;
  color: #f57c00 !important;
}

.user-color-4 {
  background-color: #fce4ec !important;
  color: #c2185b !important;
}

.user-color-5 {
  background-color: #e0f2f1 !important;
  color: #00796b !important;
}

.user-color-6 {
  background-color: #f1f8e9 !important;
  color: #689f38 !important;
}

.user-color-7 {
  background-color: #fff8e1 !important;
  color: #fbc02d !important;
}

.user-color-8 {
  background-color: #e8eaf6 !important;
  color: #3949ab !important;
}

.user-color-9 {
  background-color: #fbe9e7 !important;
  color: #d84315 !important;
}

.user-color-10 {
  background-color: #e0f7fa !important;
  color: #0097a7 !important;
}

.user-color-11 {
  background-color: #f9fbe7 !important;
  color: #827717 !important;
}

/* --- Scrollbar Styling --- */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* --- Border Radius Utilities --- */
.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-bottom-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-start-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* --- Shadow Utilities --- */
.shadow-hover {
  transition: box-shadow 0.2s ease;
}

.shadow-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* --- Link Utilities --- */
.link-unstyled {
  color: inherit;
  text-decoration: none;
}

.link-unstyled:hover {
  color: inherit;
  text-decoration: none;
}

/* --- Description Clamp --- */
.desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 4.5em;
  transition: max-height 0.3s ease;
}

.desc-expanded {
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
}

/* --- Toast Container --- */
.toast-container {
  z-index: 9999;
}

/* --- Kanban Board Utilities --- */
.kanban-board .kanban-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.kanban-board .kanban-col {
  flex: 0 0 320px;
  max-width: 320px;
}

@media (min-width: 1200px) {
  .kanban-board .kanban-col {
    flex-basis: 340px;
    max-width: 340px;
  }
}

/* --- Global Overflow Prevention --- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.container,
.container-fluid,
.content-wrapper,
.page-content {
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* --- Section Title Underline --- */
.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--bs-primary);
  transition: width 0.3s ease;
}

.section-title.revealed::after {
  width: 100%;
}

/* --- Unassigned Task Styling --- */
.unassigned {
  opacity: 0.8;
}

.unassigned .avatar-sm {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary) !important;
}

/* --- Empty Column Indicator --- */
.is-empty {
  background-color: rgba(0, 0, 0, 0.02);
}

/* --- Responsive Utilities --- */
@media (max-width: 576px) {
  .hide-sm {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hide-md {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .hide-lg {
    display: none !important;
  }
}

/* --- Print Utilities --- */
@media print {
  .no-print {
    display: none !important;
  }
}