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

/* Lexxy editor customizations for task pane */
#task-description-editor {
  min-height: 200px;
  border: 1px solid rgb(243 244 246); /* gray-100 */
  border-radius: 0.5rem;
  background-color: rgb(249 250 251); /* gray-50 */
  display: block;
  cursor: text;
}

#task-description-editor:focus-within {
  background-color: white;
  border-color: rgb(209 213 219); /* gray-300 */
  outline: none;
  box-shadow: 0 0 0 1px rgb(209 213 219);
}

/* Ensure editor content is clickable */
#task-description-editor [contenteditable] {
  min-height: 180px;
  padding: 0.75rem;
  outline: none;
}

/* Bullet list styling in editor */
#task-description-editor ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0;
}

#task-description-editor ul li {
  margin-bottom: 0.25rem;
  margin-left: -0.33rem;
}

#task-description-editor ul li:last-child {
  margin-bottom: 0;
}

/* Custom toolbar styling */
#task-description-toolbar {
  background-color: transparent;
  border: none;
  padding: 0;
  gap: 0.25rem;
}

#task-description-toolbar .lexxy-editor__toolbar-button {
  background-color: rgb(249 250 251); /* gray-50 */
  border-radius: 0.375rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

#task-description-toolbar .lexxy-editor__toolbar-button:hover {
  background-color: rgb(243 244 246); /* gray-100 */
}

#task-description-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: rgb(229 231 235); /* gray-200 */
}

#task-description-toolbar .lexxy-editor__toolbar-button svg {
  width: 16px;
  height: 16px;
  fill: rgb(75 85 99); /* gray-600 */
}

/* Task description in cards - prose styling */
.task-description.prose {
  color: rgb(107 114 128); /* gray-500 */
}

.task-description.prose p {
  margin: 0 0 0.5rem 0;
}

.task-description.prose p:last-child {
  margin-bottom: 0;
}

.task-description.prose ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.task-description.prose ul li {
  margin-bottom: 0.25rem;
  margin-left: -0.33rem;
}

.task-description.prose ul li:last-child {
  margin-bottom: 0;
}

.task-description.prose a {
  color: rgb(37 99 235); /* blue-600 */
  text-decoration: underline;
}