@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Smooth transitions for all interactive elements */
  input,
  textarea,
  select,
  button,
  a {
    @apply transition-all duration-200 ease-in-out;
  }

  /* Placeholder styling */
  ::placeholder {
    @apply text-gray-400;
    opacity: 0.7;
  }

  /* Textarea auto-resize enhancement */
  textarea {
    @apply transition-[height] duration-200 ease-in-out;
  }

  /* Custom scrollbar for textareas */
  textarea::-webkit-scrollbar {
    @apply w-2;
  }

  textarea::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
  }

  textarea::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded;
  }

  textarea::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }

  /* Mobile-optimized touch targets */
  @media (max-width: 640px) {
    input,
    textarea,
    select,
    button {
      @apply min-h-[48px];
    }
  }
}

@layer components {
  /* Input focus animations */
  input:focus,
  textarea:focus,
  select:focus {
    @apply outline-none ring-2 ring-indigo-500/10 -translate-y-px;
  }

  /* Radio button custom styling for priority selection */
  input[type="radio"]:checked + div {
    @apply font-semibold;
  }

  /* Enhanced hover states for buttons */
  button:hover,
  a.inline-flex:hover {
    @apply -translate-y-0.5 shadow-lg;
  }

  button:active,
  a.inline-flex:active {
    @apply translate-y-0;
  }

  /* Focus within styling for form groups */
  .space-y-2:focus-within label {
    @apply text-indigo-600;
  }

  /* Gradient text for section headers */
  .text-gradient {
    @apply bg-gradient-to-br from-indigo-500 to-purple-600 bg-clip-text text-transparent;
  }

  /* Section icon backgrounds */
  .section-icon {
    @apply bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-2;
  }

  /* Error state styling */
  input.error,
  textarea.error,
  select.error {
    @apply border-red-500 bg-red-50;
  }

  /* Success state styling */
  input.success,
  textarea.success,
  select.success {
    @apply border-emerald-500 bg-emerald-50;
  }

  /* Loading state for submit buttons */
  button[disabled] {
    @apply opacity-60 cursor-not-allowed;
    transform: none !important;
  }

  /* Priority radio button active states */
  label:has(input[type="radio"]:checked) {
    background-color: var(--selected-bg);
    border-color: var(--selected-border);
    box-shadow: 0 0 0 3px var(--selected-shadow);
  }

  /* Form validation feedback */
  .field-error {
    @apply text-red-600 text-sm mt-1 flex items-center gap-1;
  }

  .field-success {
    @apply text-emerald-600 text-sm mt-1 flex items-center gap-1;
  }

  /* Desktop enhancements - stagger animation for form sections */
  @media (min-width: 640px) {
    form > div > div:nth-child(1) {
      animation-delay: 0.1s;
    }

    form > div > div:nth-child(2) {
      animation-delay: 0.2s;
    }

    form > div > div:nth-child(3) {
      animation-delay: 0.3s;
    }
  }

  /* Mobile - larger tap targets for radio buttons */
  @media (max-width: 640px) {
    input[type="radio"] + div {
      @apply p-4;
    }
  }
}

@layer utilities {
/* Custom animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
      transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out;
  }

  /* Ripple effect on form submission */
  @keyframes ripple {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  button[type="submit"]:active::after {
    content: "";
    @apply absolute inset-0 bg-white/50;
    border-radius: inherit;
    animation: ripple 0.6s ease-out;
  }
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

/* Flash message slide-down animation */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slide-down 0.3s ease-out;
}

/* Safe area padding for devices with notches/home indicators */
.safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Dropdown menu animation */
@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-dropdown-target="menu"]:not(.hidden) {
  animation: dropdown-in 0.15s ease-out;
}

/* ===========================================
   Kanban Expand/Collapse Styles (Mobile-First)
   =========================================== */

/* Collapsible container with smooth animations */
.kanban-column-content {
  max-height: 2000px; /* Large enough for any content */
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease-out,
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-height, opacity; /* Performance hint */
}

.kanban-column-content.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}


/* Modern spring physics for icon rotation */
.kanban-toggle-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* When collapsed, rotate icon to point right (to expand) - GitLab style */
.kanban-stage.collapsed .kanban-toggle-icon {
  transform: rotate(-90deg);
}

/* When expanded, icon points down (to collapse) - default state */

/* Touch optimization */
.touch-manipulation {
  touch-action: manipulation; /* Prevents double-tap zoom */
}

/* Mobile: Full-width tap area */
@media (max-width: 639px) {
  .kanban-stage-header {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(139, 92, 246, 0.1);
  }

  .kanban-stage-header:active {
    background-color: rgba(0, 0, 0, 0.02);
    transform: scale(0.998);
  }

  /* Glassmorphism effect on collapsed headers (mobile) */
  .kanban-stage-header.collapsed {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Smooth scroll behavior for mobile */
  .kanban-column-content {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }
}

/* Tablet: Enhanced hover states */
@media (min-width: 640px) and (max-width: 1023px) {
  .kanban-toggle-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

/* Desktop: Refined interactions */
@media (min-width: 1024px) {
  .kanban-toggle-button {
    transition: all 0.2s ease-out;
  }

  .kanban-toggle-button:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  .kanban-toggle-button:focus-visible {
    outline: 2px solid rgb(139, 92, 246);
    outline-offset: 2px;
  }
}

/* GitLab-style collapsed column - thin vertical strip */
.kanban-stage {
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.kanban-stage.collapsed {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  flex-shrink: 0;
}

.kanban-stage.collapsed .bg-white.rounded-2xl {
  width: 100% !important;
  height: 50vh; /* Proportional to viewport height */
  min-height: 200px;
  max-height: 60vh;
  border-radius: 8px;
  background: rgba(249, 250, 251, 0.95);
  border: 1px solid rgba(229, 231, 235, 0.8);
  border-left-width: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

/* Stage color left border */
.kanban-stage.collapsed[data-stage-color="amber"] .bg-white.rounded-2xl,
.kanban-stage.collapsed[data-stage-color="yellow"] .bg-white.rounded-2xl {
  border-left-color: rgb(234, 179, 8);
}

.kanban-stage.collapsed[data-stage-color="blue"] .bg-white.rounded-2xl {
  border-left-color: rgb(59, 130, 246);
}

.kanban-stage.collapsed[data-stage-color="indigo"] .bg-white.rounded-2xl {
  border-left-color: rgb(99, 102, 241);
}

.kanban-stage.collapsed[data-stage-color="purple"] .bg-white.rounded-2xl {
  border-left-color: rgb(168, 85, 247);
}

.kanban-stage.collapsed[data-stage-color="violet"] .bg-white.rounded-2xl {
  border-left-color: rgb(139, 92, 246);
}

.kanban-stage.collapsed[data-stage-color="orange"] .bg-white.rounded-2xl {
  border-left-color: rgb(249, 115, 22);
}

.kanban-stage.collapsed[data-stage-color="green"] .bg-white.rounded-2xl {
  border-left-color: rgb(34, 197, 94);
}

.kanban-stage.collapsed[data-stage-color="emerald"] .bg-white.rounded-2xl {
  border-left-color: rgb(16, 185, 129);
}

.kanban-stage.collapsed[data-stage-color="red"] .bg-white.rounded-2xl {
  border-left-color: rgb(239, 68, 68);
}

.kanban-stage.collapsed[data-stage-color="cyan"] .bg-white.rounded-2xl {
  border-left-color: rgb(6, 182, 212);
}

.kanban-stage.collapsed[data-stage-color="teal"] .bg-white.rounded-2xl {
  border-left-color: rgb(20, 184, 166);
}

.kanban-stage.collapsed[data-stage-color="sky"] .bg-white.rounded-2xl {
  border-left-color: rgb(14, 165, 233);
}

.kanban-stage.collapsed .p-3,
.kanban-stage.collapsed .sm\:p-4 {
  padding: 8px 4px !important;
  height: 100%;
}

.kanban-stage.collapsed .kanban-stage-header {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 100%;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  flex-direction: column;
  gap: 0;
}

.kanban-stage.collapsed .kanban-stage-header > div:first-child {
  flex-direction: column !important;
  gap: 6px;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 auto;
  padding-top: 32px; /* Make room for toggle button */
  padding-right: 4px;
  padding-bottom: 8px;
  min-height: 120px; /* Ensure minimum space for content */
  overflow: visible !important;
}

/* Ensure color indicator (dot) is visible when collapsed */
.kanban-stage.collapsed .kanban-stage-header > div:first-child > div:first-child {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  flex-shrink: 0;
}

.kanban-stage.collapsed .kanban-stage-header > div:first-child > h3 {
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  width: auto !important;
  word-break: keep-all !important;
  word-wrap: normal !important;
  hyphens: none !important;
}

/* Stage name and count container when collapsed */
.kanban-stage.collapsed .kanban-stage-header > div:first-child > h3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-bottom: 4px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

/* Count badge next to stage name */
.kanban-stage.collapsed .kanban-stage-header > div:first-child::after {
  content: attr(data-count);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 9px;
  font-weight: 600;
  color: rgba(17, 24, 39, 0.7);
  padding: 2px 0;
  line-height: 1.2;
}

/* Ensure stage name is visible when collapsed */
.kanban-stage.collapsed .kanban-stage-header > div:first-child > h3 {
  display: block !important;
  visibility: visible !important;
}

.kanban-stage.collapsed h3 {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  font-size: 11px;
  font-weight: 600;
  margin: 0 !important;
  letter-spacing: 0.3px;
  color: rgba(17, 24, 39, 0.9) !important;
  line-height: 1.4;
  padding: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: right;
  position: relative;
  max-width: none !important;
  width: auto !important;
}

/* Show count badge near stage name label - using CSS content with data attribute */
.kanban-stage.collapsed .kanban-stage-header > div:first-child > h3::after {
  content: " (" attr(data-count) ")";
  font-size: 9px;
  font-weight: 500;
  color: rgba(17, 24, 39, 0.65);
  letter-spacing: 0.2px;
  display: inline;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Hide value bar and count badge when collapsed */
.kanban-stage.collapsed .kanban-stage-header + div {
  display: none !important; /* Hide value bar when collapsed */
}

.kanban-stage.collapsed [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed [data-lead-pipeline-target="collapseButton"] {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 2px !important;
  z-index: 10;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  margin: 0;
}

/* Stage color for toggle button */
.kanban-stage.collapsed[data-stage-color="amber"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="amber"] [data-lead-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="yellow"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="yellow"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.3);
}

.kanban-stage.collapsed[data-stage-color="blue"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="blue"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.kanban-stage.collapsed[data-stage-color="indigo"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="indigo"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
}

.kanban-stage.collapsed[data-stage-color="purple"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="purple"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
}

.kanban-stage.collapsed[data-stage-color="violet"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="violet"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

.kanban-stage.collapsed[data-stage-color="orange"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="orange"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.3);
}

.kanban-stage.collapsed[data-stage-color="green"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="green"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
}

.kanban-stage.collapsed[data-stage-color="emerald"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="emerald"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

.kanban-stage.collapsed[data-stage-color="red"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="red"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.kanban-stage.collapsed[data-stage-color="cyan"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="cyan"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
}

.kanban-stage.collapsed[data-stage-color="teal"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="teal"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(20, 184, 166, 0.15);
  border-color: rgba(20, 184, 166, 0.3);
}

.kanban-stage.collapsed[data-stage-color="sky"] [data-pipeline-target="collapseButton"],
.kanban-stage.collapsed[data-stage-color="sky"] [data-lead-pipeline-target="collapseButton"] {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}

.kanban-stage.collapsed [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed [data-lead-pipeline-target="collapseButton"] svg {
  width: 12px !important;
  height: 12px !important;
}

/* Stage color for icon */
.kanban-stage.collapsed[data-stage-color="amber"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="amber"] [data-lead-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="yellow"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="yellow"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(234, 179, 8);
}

.kanban-stage.collapsed[data-stage-color="blue"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="blue"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(59, 130, 246);
}

.kanban-stage.collapsed[data-stage-color="indigo"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="indigo"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(99, 102, 241);
}

.kanban-stage.collapsed[data-stage-color="purple"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="purple"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(168, 85, 247);
}

.kanban-stage.collapsed[data-stage-color="violet"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="violet"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(139, 92, 246);
}

.kanban-stage.collapsed[data-stage-color="orange"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="orange"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(249, 115, 22);
}

.kanban-stage.collapsed[data-stage-color="green"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="green"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(34, 197, 94);
}

.kanban-stage.collapsed[data-stage-color="emerald"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="emerald"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(16, 185, 129);
}

.kanban-stage.collapsed[data-stage-color="red"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="red"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(239, 68, 68);
}

.kanban-stage.collapsed[data-stage-color="cyan"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="cyan"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(6, 182, 212);
}

.kanban-stage.collapsed[data-stage-color="teal"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="teal"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(20, 184, 166);
}

.kanban-stage.collapsed[data-stage-color="sky"] [data-pipeline-target="collapseButton"] svg,
.kanban-stage.collapsed[data-stage-color="sky"] [data-lead-pipeline-target="collapseButton"] svg {
  color: rgb(14, 165, 233);
}

.kanban-stage.collapsed [data-pipeline-target="column"],
.kanban-stage.collapsed [data-lead-pipeline-target="column"] {
  display: none !important; /* Hide column content when collapsed */
}

/* Reorganize header content when collapsed - ensure stage name is visible */
.kanban-stage.collapsed .kanban-stage-header > div:first-child > div:first-child {
  width: 8px !important;
  height: 8px !important;
  flex-shrink: 0;
}

/* Toggle button positioned at top */
.kanban-stage.collapsed .kanban-stage-header > div:last-child {
  position: absolute;
  top: 6px;
  right: 4px;
  flex-direction: row !important;
  gap: 0;
  align-items: center;
  z-index: 10;
}

/* Hide count badge from button container - it's shown near label via ::after */
.kanban-stage.collapsed .kanban-stage-header > div:last-child > span {
  display: none !important;
}

/* Mobile adjustments for collapsed columns */
@media (max-width: 639px) {
  .kanban-stage.collapsed {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  .kanban-stage.collapsed .bg-white.rounded-2xl {
    height: 35vh; /* Proportional to mobile screen */
    min-height: 150px;
    max-height: 45vh;
  }

  .kanban-stage.collapsed .p-3,
  .kanban-stage.collapsed .sm\:p-4 {
    padding: 6px 3px !important;
    height: 100%;
  }

  .kanban-stage.collapsed .kanban-stage-header {
    min-height: 150px;
    justify-content: flex-start;
    padding-top: 8px;
  }

  .kanban-stage.collapsed .kanban-stage-header > div:first-child {
    padding-top: 28px; /* Less padding on mobile */
    padding-right: 2px;
    gap: 6px;
  }

  /* Ensure color indicator (dot) is visible on mobile */
  .kanban-stage.collapsed .kanban-stage-header > div:first-child > div:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 8px !important;
    height: 8px !important;
    flex-shrink: 0;
  }

  .kanban-stage.collapsed h3 {
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.2px;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
    hyphens: none !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Count badge on mobile */
  .kanban-stage.collapsed .kanban-stage-header > div:first-child > h3::after {
    font-size: 8px;
    letter-spacing: 0.1px;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* Toggle button on mobile */
  .kanban-stage.collapsed [data-pipeline-target="collapseButton"],
  .kanban-stage.collapsed [data-lead-pipeline-target="collapseButton"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 1px !important;
    top: 4px;
    right: 2px;
  }

  .kanban-stage.collapsed [data-pipeline-target="collapseButton"] svg,
  .kanban-stage.collapsed [data-lead-pipeline-target="collapseButton"] svg {
    width: 10px !important;
    height: 10px !important;
  }

  .kanban-stage.collapsed .kanban-stage-header > div:last-child {
    top: 4px;
    right: 2px;
  }
}

/* ===========================================
   Exit Criteria Mobile-First Styles
   =========================================== */

/* Mobile bottom sheet modal for transitions */
@layer components {
  .exit-criteria-bottom-sheet {
    @apply fixed inset-x-0 bottom-0 z-50;
    @apply bg-white rounded-t-3xl shadow-2xl;
    @apply transform transition-transform duration-300 ease-out;
    @apply pb-safe;
    max-height: 85vh;
    overflow-y: auto;
  }

  .exit-criteria-bottom-sheet.hidden {
    transform: translateY(100%);
  }

  /* Handle bar for bottom sheet */
  .bottom-sheet-handle {
    @apply w-10 h-1 bg-gray-300 rounded-full mx-auto mt-3 mb-2;
  }

  /* Touch-friendly checkboxes */
  .touch-device .exit-criteria-checkbox {
    @apply w-6 h-6;
    min-width: 24px;
    min-height: 24px;
  }

  /* Large touch targets for mobile */
  .exit-criteria-touch-target {
    @apply min-h-[44px] min-w-[44px];
    @apply flex items-center justify-center;
  }

  /* Mobile-friendly field chips */
  .field-chip-mobile {
    @apply px-3 py-2 text-sm;
    @apply rounded-full bg-teal-100 text-teal-800;
    @apply inline-flex items-center gap-2;
    touch-action: manipulation;
  }

  /* Collapsible section animation */
  .exit-criteria-section-content {
    @apply overflow-hidden transition-all duration-300 ease-in-out;
  }

  .exit-criteria-section-content.collapsed {
    max-height: 0;
    @apply opacity-0;
  }

  .exit-criteria-section-content.expanded {
    max-height: 1000px;
    @apply opacity-100;
  }

  /* Progress bar animation */
  .exit-criteria-progress {
    @apply transition-all duration-500 ease-out;
  }

  /* Swipe hint for mobile kanban */
  .swipe-hint {
    @apply absolute left-0 right-0 bottom-0;
    @apply bg-gradient-to-t from-gray-900/10 to-transparent;
    @apply py-2 text-center text-xs text-gray-500;
    @apply pointer-events-none;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
  /* Exit criteria form on mobile */
  .exit-criteria-form {
    @apply space-y-4;
  }

  .exit-criteria-form .grid {
    @apply grid-cols-1;
  }

  /* Template buttons stack on mobile */
  .template-buttons {
    @apply flex-col items-stretch;
  }

  .template-buttons button {
    @apply w-full justify-center;
  }

  /* Criteria checklist mobile layout */
  .exit-criteria-checklist {
    @apply px-2;
  }

  .exit-criteria-checklist > div {
    @apply p-3;
  }

  /* Field selector dropdown mobile */
  .field-selector-dropdown {
    @apply fixed inset-x-4 bottom-4 top-auto;
    @apply max-h-[60vh];
    @apply rounded-2xl shadow-2xl;
  }

  /* Modal content on mobile */
  dialog.exit-criteria-modal {
    @apply max-w-none w-full m-0;
    @apply rounded-t-2xl rounded-b-none;
    @apply fixed bottom-0;
    max-height: 90vh;
  }

  /* Accordion-style sections on mobile */
  .exit-criteria-accordion {
    @apply border-b border-gray-100 last:border-b-0;
  }

  .exit-criteria-accordion-header {
    @apply py-4 w-full flex items-center justify-between;
    @apply text-left font-medium;
  }
}

/* Tablet and up */
@media (min-width: 641px) {
  .exit-criteria-form .grid {
    @apply grid-cols-2;
  }

  .template-buttons {
    @apply flex-row flex-wrap;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .exit-criteria-form {
    @apply space-y-6;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .exit-criteria-checklist .bg-green-50 {
    @apply bg-green-100 border border-green-600;
  }

  .exit-criteria-checklist .bg-amber-50 {
    @apply bg-amber-100 border border-amber-600;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .exit-criteria-bottom-sheet,
  .exit-criteria-section-content,
  .exit-criteria-progress {
    transition: none;
    animation: none;
  }
}

/* Safe area padding utilities */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.pt-safe {
  padding-top: env(safe-area-inset-top, 0);
}

/* Touch feedback */
@media (hover: none) {
  .exit-criteria-touch-target:active {
    @apply bg-gray-100;
    transform: scale(0.98);
  }
}