/* House Keeping Logger - Mobile Responsive CSS
   Enhances the app for smaller screens (tablets and phones) */

/* ===================================================
   SIDEBAR & NAVIGATION - Mobile Slide-in
   =================================================== */
@media (max-width: 768px) {
  /* Hide sidebar by default on mobile */
  aside {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 50 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    width: 280px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
  }

  /* Main content takes full width on mobile */
  .flex-1.flex.flex-col.transition-all {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Adjust main content padding on mobile */
  main, .flex-1.p-6.overflow-auto {
    padding: 12px !important;
  }

  /* Header adjustments */
  header {
    padding: 10px 14px !important;
  }

  header span.text-2xl {
    font-size: 16px !important;
  }

  /* Show user name on mobile */
  .hidden.md\\:block {
    display: block !important;
  }
}

/* ===================================================
   TABLE - Horizontal scroll on mobile
   =================================================== */
@media (max-width: 768px) {
  /* Table container gets horizontal scroll */
  .rounded-lg.border.border-gray-200.overflow-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Minimum width on table to prevent excessive squishing */
  table {
    min-width: 700px !important;
  }

  /* Smaller font in table cells */
  table th, table td {
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  /* Jobs page search/filter bar */
  .bg-white.p-6.rounded-lg.shadow-sm {
    padding: 12px !important;
  }
}

/* ===================================================
   SEARCH & FILTER BAR - Stack on mobile
   =================================================== */
@media (max-width: 640px) {
  /* Stack search and buttons vertically */
  .flex.flex-col.md\\:flex-row.justify-between.items-center.mb-4 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Search input takes full width */
  .relative.w-full.md\\:w-80 {
    width: 100% !important;
  }

  /* Export/PDF buttons row wraps */
  .flex.items-center.gap-2,
  .flex.items-center.space-x-4 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ===================================================
   DASHBOARD - Motel cards stack on mobile
   =================================================== */
@media (max-width: 640px) {
  /* Dashboard motel grid becomes 1 column */
  .grid.grid-cols-1,
  .grid.grid-cols-2,
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Cards get full width */
  .rounded-xl, .rounded-lg {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===================================================
   FORMS - Better mobile form inputs
   =================================================== */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 10px 12px !important;
  }

  /* Buttons more tappable on mobile */
  button {
    min-height: 40px !important;
  }
}

/* ===================================================
   JOB VIEW PAGE - Images responsive
   =================================================== */
@media (max-width: 768px) {
  .grid.grid-cols-2.gap-4,
  .grid.grid-cols-3.gap-4 {
    grid-template-columns: 1fr !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ===================================================
   MODALS & DIALOGS - Full screen on mobile
   =================================================== */
@media (max-width: 480px) {
  /* Modal dialogs take more width on small screens */
  [role="dialog"],
  .fixed.inset-0 > div {
    width: 95% !important;
    margin: 0 auto !important;
  }
}

/* ===================================================
   HEADER USER DROPDOWN - Compact on mobile
   =================================================== */
@media (max-width: 480px) {
  .flex.items-center.space-x-6 {
    gap: 8px !important;
  }
}

/* ===================================================
   SCROLLBAR - Slim for mobile
   =================================================== */
.slim-scrollbar::-webkit-scrollbar {
  height: 4px !important;
  width: 4px !important;
}

.slim-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}

.slim-scrollbar::-webkit-scrollbar-thumb {
  background: #10b981 !important;
  border-radius: 4px !important;
}

/* ===================================================
   PDF DOWNLOAD BUTTON - Mobile friendly
   =================================================== */
@media (max-width: 640px) {
  #pdf-download-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}

/* ===================================================
   PAGE TITLE & BREADCRUMB - Mobile
   =================================================== */
@media (max-width: 640px) {
  h1.text-2xl, .text-2xl.font-bold {
    font-size: 18px !important;
  }

  .p-4.bg-gray-50 {
    padding: 10px !important;
  }
}

/* ===================================================
   PAGINATION - Center on mobile
   =================================================== */
@media (max-width: 640px) {
  .flex.items-center.justify-between.mt-4 {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}