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

/* Sortable drag states */

/* Ghost element (placeholder where item will be dropped) */
.sortable-ghost {
  opacity: 0.4;
  background-color: rgb(224 231 255); /* indigo-100 */
  border: 2px dashed rgb(165 180 252); /* indigo-300 */
  border-radius: 0.375rem;
}

/* Element being dragged */
.sortable-drag {
  opacity: 0.9;
  transform: rotate(2deg);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Chosen but not yet dragged */
.sortable-chosen {
  box-shadow: 0 0 0 2px rgb(129 140 248); /* indigo-400 */
  border-radius: 0.375rem;
}

/* Disabled containers */
[data-sortable-disabled-value="true"] {
  opacity: 0.5;
}

/* Cursor during drag */
body.dragging {
  cursor: grabbing !important;
}

body.dragging * {
  cursor: grabbing !important;
}

/* Task completion animation */
.task-moving {
  animation: taskSlide 0.3s ease-out;
}

@keyframes taskSlide {
  from {
    opacity: 0.5;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* iOS Safe Area Support */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  /* Add padding to bottom for home indicator on iOS */
  .min-h-screen {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Side pane slide-in animation */
.side-pane-backdrop {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.side-pane-backdrop-visible {
  opacity: 1;
}

.side-pane-panel {
  transform: translateX(100%);
  transition: transform 0.2s ease;
}

.side-pane-panel-visible {
  transform: translateX(0);
}

/* FAB bottom sheet animation */
.fab-backdrop {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fab-backdrop-visible {
  opacity: 1;
}

.fab-modal {
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.fab-modal-visible {
  transform: translateY(0);
}

/* Mobile: safe area padding */
@media (max-width: 767px) {
  .fab-modal {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Desktop: centered modal */
@media (min-width: 768px) {
  .fab-modal {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 480px;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .fab-modal-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Touch optimizations for mobile */
@media (max-width: 768px) {
  /* Improve tap target sizes */
  button, a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Prevent text selection during drag operations */
  .sortable-drag * {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Smooth scrolling on mobile */
  html {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent pull-to-refresh when scrolling */
  body {
    overscroll-behavior-y: contain;
  }

  /* Prevent zoom on input focus in task pane (font-size must be >= 16px) */
  [data-task-pane-target="panel"] input,
  [data-task-pane-target="panel"] textarea {
    font-size: 16px;
  }
}