/* --- mobile  tweaks for invoices page ------------------ */
@media (max-width: 768px) {
  /* 1. Let the content stretch edge-to-edge */
  main.max-w-7xl {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem !important; /* keep a little breathing room */
    padding-right: 0.75rem !important;
  }

  /* 2. Stack the search + filter controls nicely */
  .flex.flex-col.md\:flex-row.justify-between {
    gap: 0.75rem !important;
  }
  /* make the search input full width */
  #invoice-search {
    width: 100% !important;
  }
  /* filters take 50 % each */
  #status-filter,
  #date-filter {
    flex: 1 1 48% !important;
  }

  /* 3. Stats cards in a single column */
  .grid.grid-cols-1.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* 4. Table wrapper can scroll horizontally if needed */
  .overflow-x-auto {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    -webkit-overflow-scrolling: touch;
  }
  .client-table {
    table-layout: auto !important;
  } /* let columns shrink */
  .client-table th,
  .client-table td {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  } /* px-3 */
}

/* Improved Mobile Invoice Cards */

@media (max-width: 768px) {
  /* Reset the current styling */
  #invoices-table-body tr {
    display: block;
    margin-bottom: 16px;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: white;
    position: relative;
    overflow: hidden;
  }

  /* Hide table headers */
  .invoices-table thead {
    display: none;
  }

  /* Make table structure display as blocks */
  .invoices-table,
  .invoices-table tbody {
    display: block;
    width: 100%;
  }

  /* Hide horizontal overflow */
  .overflow-x-auto {
    overflow-x: visible !important;
  }

  /* Hide the default cell content and ::before content */
  #invoices-table-body td::before {
    content: none !important;
  }

  /* Reset basic cell styling */
  #invoices-table-body td {
    display: block;
    padding: 0;
    border: none;
  }

  /* Add color-coded left borders based on status */
  #invoices-table-body tr:has(.status-paid) {
    border-left: 4px solid #10b981; /* Green for paid */
  }

  #invoices-table-body tr:has(.status-overdue) {
    border-left: 4px solid #ef4444; /* Red for overdue */
  }

  #invoices-table-body tr:has(.status-unpaid),
  #invoices-table-body tr:has(.status-badge:not(.status-paid):not(.status-overdue)) {
    border-left: 4px solid #3b82f6; /* Blue for pending/unpaid */
  }

  /* Layout the invoice number in the top left */
  #invoices-table-body td:nth-child(1) {
    padding: 16px 16px 8px 16px;
    font-weight: 600;
    font-size: 16px;
  }

  /* Hide client name if N/A */
  #invoices-table-body td:nth-child(2) {
    display: none;
  }

  /* Display dates side by side */
  #invoices-table-body td:nth-child(3),
  #invoices-table-body td:nth-child(4) {
    width: 50%;
    float: left;
    padding: 0 16px;
  }

  /* Style the date labels */
  #invoices-table-body td:nth-child(3)::before,
  #invoices-table-body td:nth-child(4)::before {
    display: block;
    content: "Issue Date" !important;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 4px;
  }

  #invoices-table-body td:nth-child(4)::before {
    content: "Due Date" !important;
  }

  /* Style the amount */
  #invoices-table-body td:nth-child(5) {
    clear: both;
    padding: 16px 16px 8px 16px;
  }

  #invoices-table-body td:nth-child(5)::before {
    display: block;
    content: "Amount" !important;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 4px;
  }

  /* Make amount larger */
  #invoices-table-body td:nth-child(5) div {
    font-size: 24px;
    font-weight: 700;
  }

  /* Position the status badge in the top right */
  #invoices-table-body td:nth-child(6) {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  /* Style status badges */
  .status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
  }

  .status-paid {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
  }

  .status-overdue {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
  }

  /* Style for pending/other statuses */
  .status-badge:not(.status-paid):not(.status-overdue) {
    background-color: #dbeafe !important;
    color: #1e40af !important;
  }

  /* Style the action buttons container */
  #invoices-table-body td:nth-child(7) {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Style the action buttons */
  #invoices-table-body td:nth-child(7) button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
  }

  /* Hide the flex container around buttons */
  #invoices-table-body td:nth-child(7) .flex.space-x-3 {
    display: contents;
  }

  /* Add spacing between cards */
  #invoices-table-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px;
  }

  /* Fix pagination for mobile */
  .flex.justify-between.items-center.mt-6 {
    flex-direction: column;
    gap: 16px;
  }

  .flex.justify-between.items-center.mt-6 > div:first-child {
    width: 100%;
    text-align: center;
  }

  /* Clear any unnecessary padding */
  .bg-white.p-8 {
    padding: 16px 0 !important;
  }
}
/* Invoice Multi-Select Styles */

/* Checkbox styling */
.invoice-checkbox {
  cursor: pointer;
  transition: all 0.2s ease;
}

.invoice-checkbox:checked {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.invoice-checkbox:focus {
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

/* Selected row/card highlighting */
tr.selected-row {
  background-color: rgba(79, 70, 229, 0.05) !important;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.2);
}

/* Progress modal styling */
#invoice-bulk-action-progress-modal {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#invoice-bulk-action-progress-bar {
  transition: width 0.5s ease;
}

/* Selection count badge animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.count-updated {
  animation: pulse 0.5s ease;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  #selected-count {
    font-size: 0.875rem;
  }
}

/* Enhanced Mobile Card and Table styles */
@media (max-width: 768px) {
  /* Mobile invoice cards */
  #invoices-table-body tr {
    position: relative;
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease;
  }

  #invoices-table-body tr.selected-row {
    border-left-color: #4f46e5;
  }

  /* Make checkbox visible but compact */
  .invoice-checkbox {
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Space between toolbar and content */
  #invoices-table-body {
    margin-bottom: 80px;
  }

  /* Status indicators for mobile cards */
  #invoices-table-body tr:has(.status-paid) {
    border-left: 4px solid #10b981; /* Green for paid */
  }

  #invoices-table-body tr:has(.status-paid).selected-row {
    border-left: 4px solid #4f46e5 !important; /* Override with selection color */
  }

  #invoices-table-body tr:has(.status-overdue) {
    border-left: 4px solid #ef4444; /* Red for overdue */
  }

  #invoices-table-body tr:has(.status-overdue).selected-row {
    border-left: 4px solid #4f46e5 !important;
  }
}

/* Export dropdown menu styling */
.export-dropdown {
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.export-dropdown button {
  transition: background-color 0.2s;
}

.export-dropdown button:hover {
  background-color: #f3f4f6;
}

/* Animation for toolbar */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Selected state styling */
.invoice-checkbox:checked {
  background-color: #4f46e5;
  border-color: #4f46e5;
}

.invoice-checkbox:checked::after {
  content: "✓";
  position: absolute;
  color: white;
  font-size: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}