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

/* Custom tooltip styling for better description display */
.cursor-help:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #9CA3AF;
}

/* Mobile-specific touch enhancements */
@media (max-width: 639px) {
  /* Ensure minimum touch targets of 44px */
  .transaction-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Better touch feedback */
  .transaction-menu button {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Prevent text selection on action buttons */
  .transaction-menu-btn,
  .quick-confirm-btn,
  .edit-transaction-btn,
  .delete-transaction-btn,
  .account-option,
  button[data-account-selector-target="button"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Better touch targets for account selector */
  button[data-account-selector-target="button"] {
    min-height: 44px;
  }
  
  .account-option {
    min-height: 60px;
  }

  /* Account menu touch enhancements */
  .account-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .account-menu a {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Prevent text selection on account menu buttons */
  .account-menu-btn,
  .account-menu a {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Fallback styles for browsers without proper CSS support */
.legacy-browser {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.legacy-browser body {
  margin: 0;
  padding: 0;
  background-color: #f9fafb;
}

.legacy-browser nav {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.legacy-browser .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.legacy-browser .card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.legacy-browser .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.legacy-browser .btn-primary {
  background-color: #7c3aed;
  color: #ffffff;
}

.legacy-browser .btn-secondary {
  background-color: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* Sortable.js styles for drag and drop */
.sortable-ghost {
  opacity: 0.5;
  background-color: #e5e7eb !important;
}

.sortable-ghost td {
  background-color: #e5e7eb !important;
}

.sortable-chosen {
  cursor: grabbing !important;
}

.sortable-chosen td {
  cursor: grabbing !important;
}

.sortable-drag {
  transform: rotate(2deg);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Ensure table rows can be dragged properly */
tbody[data-controller="sortable"] tr {
  transition: all 0.2s ease;
  position: relative;
}

tbody[data-controller="sortable"] tr:hover {
  background-color: #f9fafb;
}

/* Allow table row movement */
tbody[data-controller="sortable"] tr.sortable-chosen {
  position: relative;
  z-index: 1000;
}

tbody[data-controller="sortable"] tr.sortable-ghost {
  position: relative;
  opacity: 0.5;
}

tbody[data-controller="sortable"] tr.sortable-drag {
  position: relative;
  z-index: 1001;
  transform: rotate(2deg);
}

/* Fallback drag styling for tables */
.sortable-fallback {
  display: table-row !important;
  opacity: 0.8;
  background-color: #e5e7eb !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  transform: rotate(2deg);
}

.sortable-fallback td {
  background-color: #e5e7eb !important;
}

/* Invalid drop zone styling */
tbody[data-controller="sortable"] tr.invalid-drop-target {
  background-color: #fecaca !important;
  cursor: not-allowed;
}

tbody[data-controller="sortable"] tr.invalid-drop-target td {
  background-color: #fecaca !important;
}

/* Valid drop zone highlighting */
tbody[data-controller="sortable"] tr.valid-drop-target {
  background-color: #dcfce7 !important;
}

tbody[data-controller="sortable"] tr.valid-drop-target td {
  background-color: #dcfce7 !important;
}

/* Drag handle styling */
.drag-handle {
  cursor: grab;
  color: #9ca3af;
  transition: all 0.2s;
  opacity: 0;
  visibility: hidden;
  padding: 4px;
  margin: -4px;
  border-radius: 4px;
}

.drag-handle:hover {
  color: #6b7280;
  opacity: 1;
  background-color: #f3f4f6;
}

.drag-handle:active {
  cursor: grabbing;
  color: #374151;
  background-color: #e5e7eb;
}

/* Ensure drag handles are properly sized and clickable */
tbody .drag-handle {
  font-size: 16px;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Make sortable rows have consistent styling */
.sortable-row {
  position: relative;
}

/* Show drag handles only when hovering over rows that can be reordered */
.sortable-row.can-reorder:hover .drag-handle {
  opacity: 1;
  visibility: visible;
}

/* Also show drag handles when they are being actively used */
.sortable-row .drag-handle:hover,
.sortable-row .drag-handle:active,
.sortable-row .drag-handle:focus {
  opacity: 1;
  visibility: visible;
}