/* Enhanced Mobile Client Card Styles with Invoice-style Action Buttons */
@media (max-width: 768px) {
  /* Card view container optimization */
  #card-view {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  /* Client card styling */
  .client-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
  }

  /* Add subtle lift effect on tap */
  .client-card:active {
    transform: scale(0.98) !important;
  }

  /* Status indicator (colored top border) */
  .client-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background-color: #4f46e5 !important; /* Default indigo */
    z-index: 1 !important;
  }

  /* Different status colors */
  .client-card[data-status="active"]::before {
    background-color: #10b981 !important; /* Green */
  }

  .client-card[data-status="inactive"]::before {
    background-color: #6b7280 !important; /* Gray */
  }

  .client-card[data-status="pending"]::before {
    background-color: #f59e0b !important; /* Amber */
  }

  /* Better card layout */
  .client-card .p-6 {
    padding: 1rem !important;
  }

  /* Hide checkbox inside card and replace with a more subtle selected state */
  .client-card .client-checkbox {
    display: none !important;
  }

  /* Selected card styling */
  .client-card.selected-card {
    border-color: #4f46e5 !important;
    background-color: rgba(79, 70, 229, 0.05) !important;
  }

  /* Add selected indicator in the avatar */
  .client-card.selected-card .flex-shrink-0.h-10.w-10.bg-indigo-100 {
    background-color: #4f46e5 !important;
    color: white !important;
  }

  /* Client info layout */
  .client-card .flex.justify-between.items-start.mb-4 {
    margin-bottom: 0.75rem !important;
  }

  /* Name and company styling */
  .client-card .font-semibold.text-lg {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .client-card .text-gray-600.text-sm {
    font-size: 0.875rem !important;
    opacity: 0.8 !important;
  }

  /* Contact details */
  .client-card .space-y-2.mb-4 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .client-card .flex.items-center.text-gray-600 {
    margin-bottom: 0.375rem !important;
  }

  .client-card .flex.items-center.text-gray-600 .fas {
    width: 1rem !important;
    text-align: center !important;
  }

  /* Card footer */
  .client-card .bg-gray-50.px-6.py-3 {
    padding: 0.75rem 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Action buttons container */
  .client-card .flex.space-x-2 {
    gap: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Button base styling like invoice cards */
  .client-card .flex.space-x-2 button,
  .client-card .flex.space-x-2 a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  /* View button styling */
  .client-card .view-client {
    color: #3b82f6 !important; /* Blue */
    background-color: rgba(59, 130, 246, 0.1) !important;
  }

  /* Edit button styling */
  .client-card .edit-client {
    color: #4f46e5 !important; /* Indigo */
    background-color: rgba(79, 70, 229, 0.1) !important;
  }

  /* Invoice link styling */
  .client-card a[href*="create-invoice"] {
    color: #10b981 !important; /* Green */
    background-color: rgba(16, 185, 129, 0.1) !important;
  }

  /* Delete button styling */
  .client-card .delete-client {
    color: #ef4444 !important; /* Red */
    background-color: rgba(239, 68, 68, 0.1) !important;
  }

  /* Hover and active states */
  .client-card .flex.space-x-2 button:hover,
  .client-card .flex.space-x-2 a:hover {
    transform: scale(1.1) !important;
  }

  .client-card .flex.space-x-2 button:active,
  .client-card .flex.space-x-2 a:active {
    transform: scale(0.95) !important;
  }

  /* Icon sizing fixes */
  .client-card .flex.space-x-2 button i,
  .client-card .flex.space-x-2 a i {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* Status badge enhancements */
  .client-card .bg-green-100.text-green-800 {
    margin-top: 0.25rem !important;
    border-radius: 20px !important;
    padding: 0.125rem 0.625rem !important;
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.025em !important;
  }

  /* Make client card date info smaller */
  .client-card .text-xs.text-gray-500 {
    font-size: 0.7rem !important;
  }
}