/* Mobile styles for task-update page */
@media (max-width: 767px) {
  .database-content {
    font-size: 18px;
  }
  
  .database-content td:first-child {
    font-size: 14px;
    color: #6b7280; /* gray-500 */
    vertical-align: top;
    padding-top: 1rem;
  }
  
  .database-content td:last-child {
    font-size: 20px;
    font-weight: 500;
  }
  
  /* Ensure message field content is readable on mobile */
  .message-field,
  textarea[id="Message"],
  textarea[name="Message"] {
    font-size: 20px !important;
    line-height: 1.5 !important;
    display: block !important;
    width: 100% !important;
    padding: 0.5rem !important;
    border: 1px solid #d1d5db !important; /* gray-300 */
    border-radius: 0.375rem !important; /* rounded */
    background-color: #fff !important;
  }
  
  /* Make all input and textarea fields larger on mobile */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }
  
  /* Specifically target status and category select fields */
  select[id="Status"],
  select[name="Status"],
  select[id="Category"],
  select[name="Category"],
  select[id="PL_Status"],
  select[name="PL_Status"],
  select[id="PL_Cat"],
  select[name="PL_Cat"] {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }
  
  /* Make sure select option text is also large */
  select option {
    font-size: 20px !important;
  }
  
  /* Keep labels at their current size */
  label, .text-sm {
    font-size: 14px !important;
  }
  
  /* Make sure the textarea is properly sized on mobile */
  textarea {
    min-height: 100px;
  }
}