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

/* Hide scrollbar utility (board tabs on mobile) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Filter hidden tasks */
.filter-hidden {
  display: none !important;
}

/* SortableJS drag styles */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-drag {
  opacity: 1;
}

/* Mobile-specific drag improvements */
@media (max-width: 768px) {
  .sortable-ghost {
    opacity: 0.6;
    transform: scale(1.05);
  }
  
  .sortable-drag {
    opacity: 0.9;
  }
}

/* Kanban responsive improvements */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth horizontal scroll for kanban on mobile */
@media (max-width: 640px) {
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  
  /* Snap columns for easier scrolling */
  .flex-shrink-0 {
    scroll-snap-align: start;
  }
}

/* Hide scrollbar on mobile for cleaner look (still scrollable) */
@media (max-width: 640px) {
  .overflow-x-auto::-webkit-scrollbar {
    height: 4px;
  }
  
  .overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
  }
}

/* Remove default browser focus outline */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Alternative: Use outline-offset to hide blue border completely */
input,
textarea,
select {
  outline: none;
}

/* Prevent scrolling on homepage - mobile overscroll fix */
html.overflow-hidden,
body.overflow-hidden {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Pipeline stepper horizontal scrolling (task modal header) */
.pipeline-stepper-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  padding-bottom: 2px; /* keeps iOS from clipping pills */
}

.pipeline-stepper-scroll::-webkit-scrollbar {
  height: 4px;
}

.pipeline-stepper-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

/* Optional gradient fade on the right edge to hint scroll */
.pipeline-stepper-fade {
  position: relative;
}

.pipeline-stepper-fade::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-bg-elevated));
}

/* Task modal header: prevent iOS long-press text callout from fighting our custom context menu */
.task-modal-header {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.task-modal-header a,
.task-modal-header button {
  -webkit-user-select: none;
  user-select: none;
}

/* Toast animations */
@keyframes slide-in-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-out-down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in-up {
  animation: slide-in-up 0.2s ease-out forwards;
}

.animate-slide-out-down {
  animation: slide-out-down 0.2s ease-in forwards;
}

.animate-slide-in {
  animation: slide-in 0.2s ease-out forwards;
}

.animate-slide-out {
  animation: slide-out 0.2s ease-in forwards;
}

/* ============================================
   Mobile Column Tabs & Bottom Nav
   ============================================ */

/* Mobile tab button states */
.mobile-tab-active {
  background-color: var(--color-bg-elevated);
  color: var(--color-content);
  font-weight: 600;
}

.mobile-tab-inactive {
  background-color: transparent;
  color: var(--color-content-muted);
}

.mobile-tab-inactive:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-content-secondary);
}

/* Mobile active column - full width */
@media (max-width: 768px) {
  .mobile-active-column {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0;
  }
  
  /* Disable horizontal scroll when in mobile column mode */
  [data-controller*="mobile-columns"] .overflow-x-auto {
    overflow-x: hidden;
  }
}

/* Bottom nav safe area for iOS */
.safe-area-bottom {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Shared safe bottom spacing for scroll containers behind fixed mobile nav */
.scroll-safe-bottom {
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 5rem));
}

/* Board pages keep desktop padding at 0 but need mobile safe-bottom spacing */
.scroll-safe-bottom-board {
  padding-bottom: max(4rem, calc(env(safe-area-inset-bottom) + 4rem));
}

@media (min-width: 768px) {
  .scroll-safe-bottom {
    padding-bottom: 2rem;
  }

  .scroll-safe-bottom-board {
    padding-bottom: 0;
  }
}

/* Mobile responsive header adjustments */
@media (max-width: 640px) {
  /* Stack board header elements vertically */
  .board-header-mobile-stack {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
}

/* Mobile modal - full screen */
@media (max-width: 768px) {
  .mobile-fullscreen-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  .mobile-fullscreen-modal > div {
    height: 100%;
    border-radius: 0;
  }
}

/* Task cards full width on mobile */
@media (max-width: 768px) {
  .task-card {
    width: 100%;
  }
}

/* Hide scrollbar on mobile tab bar */
@media (max-width: 768px) {
  [data-mobile-columns-target="tabs"]::-webkit-scrollbar {
    display: none;
  }
  
  [data-mobile-columns-target="tabs"] {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Swipe hint animation */
@keyframes swipe-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

@media (max-width: 768px) {
  .swipe-hint {
    animation: swipe-hint 1s ease-in-out 2;
  }
}