@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;
  }

  /* Primary submit button - matches Sign In with One ID button styling */
  .btn-submit-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-emerald-600 hover:from-blue-700 hover:to-emerald-700 focus:outline-none focus:ring-4 focus:ring-blue-500/50 focus:ring-offset-2 shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/30 transition-all duration-200 transform hover:scale-[1.02] cursor-pointer;
  }

  /* 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;
  }

  /* Hide scrollbar for horizontally scrollable tab navs */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

.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;
}

/* Shake animation for failed message indicator */
@keyframes shake-once {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

.animate-shake-once {
  animation: shake-once 0.5s 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: 99999px;
  /* Large enough for any content - must exceed tallest possible column */
  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);
  }
}

/* ===========================================
   Rich Text Note Content Styles
   =========================================== */

/* Note content prose styling */
.note-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.note-content p {
  margin-bottom: 0.5em;
}

.note-content p:last-child {
  margin-bottom: 0;
}

/* Headings */
.note-content h1 {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: #1f2937;
}

.note-content h2 {
  font-size: 1.375em;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 0.5em;
  margin-bottom: 0.4em;
  color: #374151;
}

.note-content h3 {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.4em;
  margin-bottom: 0.3em;
  color: #4b5563;
}

/* Lists */
.note-content ul {
  padding-left: 1.25em;
  margin-bottom: 0.5em;
  list-style-type: disc;
}

.note-content ol {
  padding-left: 1.25em;
  margin-bottom: 0.5em;
  list-style-type: decimal;
}

.note-content li {
  margin-bottom: 0.125em;
}

/* Blockquote */
.note-content blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 0.75em;
  margin: 0.5em 0;
  color: #6b7280;
  font-style: italic;
}

/* Code - Inline */
.note-content code {
  background-color: #f3f4f6;
  color: #e11d48;
  padding: 0.125em 0.375em;
  border-radius: 0.25em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* Code Block */
.note-content pre {
  background-color: #1f2937;
  color: #f9fafb;
  padding: 0.75em 1em;
  border-radius: 0.5em;
  margin: 0.5em 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  line-height: 1.5;
}

.note-content pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Links */
.note-content a {
  color: #7c3aed;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.note-content a:hover {
  color: #5b21b6;
}

/* Text formatting */
.note-content strong {
  font-weight: 600;
}

.note-content em {
  font-style: italic;
}

.note-content u {
  text-decoration: underline;
}

.note-content s {
  text-decoration: line-through;
}

/* Mobile touch target for standalone links */
@media (max-width: 640px) {
  .note-content a {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    padding: 0.25em;
    margin: -0.25em;
  }
}

/* ===========================================
   Toast Notification Styles - MOBILE FIRST
   =========================================== */

/* Base container - Mobile first */
#toast-container {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  top: 4rem;
  /* Below mobile navbar (h-14 = 3.5rem + some spacing) */
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

/* Toast notification - Mobile first */
.toast-notification {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 0.875rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 20px -5px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  /* Mobile: slide from top */
  animation: toastSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notification.dismissing {
  animation: toastSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile animations - slide from top */
@keyframes toastSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastSlideUp {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-100%) scale(0.95);
  }
}

/* Icon wrapper - larger for mobile touch */
.toast-icon-wrapper {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-icon-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.toast-icon-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.toast-icon-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.toast-icon-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.125rem;
}

.toast-message {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.4;
  word-break: break-word;
}

/* Close button - larger touch target for mobile */
.toast-close {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -0.5rem -0.5rem -0.5rem 0;
  border-radius: 0.625rem;
  color: #9ca3af;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.toast-close:hover,
.toast-close:active {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
}

/* Progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 0.875rem 0.875rem;
  animation: toastProgress 5s linear forwards;
}

.toast-progress-success {
  background: linear-gradient(90deg, #10b981, #059669);
}

.toast-progress-error {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation-duration: 8s;
  /* Match JS alert dismiss timer */
}

@keyframes toastProgress {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* =============================================
   TABLET AND DESKTOP OVERRIDES (min-width)
   ============================================= */

/* Tablet: sm breakpoint (640px+) */
@media (min-width: 640px) {
  #toast-container {
    top: 4.5rem;
    left: auto;
    right: 1rem;
    max-width: 380px;
  }

  .toast-notification {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    /* Desktop: slide from right */
    animation: toastSlideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .toast-notification.dismissing {
    animation: toastSlideOutRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .toast-icon-wrapper {
    width: 2.25rem;
    height: 2.25rem;
  }

  .toast-close {
    width: 2rem;
    height: 2rem;
  }
}

/* Desktop: lg breakpoint (1024px+) */
@media (min-width: 1024px) {
  #toast-container {
    top: 5rem;
    right: 1.5rem;
    max-width: 400px;
  }
}

/* Desktop animations - slide from right */
@keyframes toastSlideInRight {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastSlideOutRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .toast-notification {
    background: rgba(31, 41, 55, 0.97);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.3),
      0 10px 20px -5px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .toast-title {
    color: #f9fafb;
  }

  .toast-message {
    color: #9ca3af;
  }

  .toast-close {
    color: #6b7280;
  }

  .toast-close:hover,
  .toast-close:active {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
  }
}

/* Safe area insets for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
  #toast-container {
    top: calc(4rem + env(safe-area-inset-top));
  }

  @media (min-width: 640px) {
    #toast-container {
      top: calc(4.5rem + env(safe-area-inset-top));
    }
  }
}