/* Shared responsive styles for Logistic pages */

/* Global layout helpers */
* , *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

/* Mobile padding adjustments */
@media (max-width: 768px) {
  body { padding: 20px !important; }
  .content { padding: 20px !important; }
}
@media (max-width: 576px) {
  body { padding: 16px !important; }
}

/* Auth header stacks on small screens */
@media (max-width: 576px) {
  .auth-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .user-info { flex-wrap: wrap; gap: 8px; }
}

/* Headings scale down */
@media (max-width: 576px) {
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
}

/* Grids: search and stats */
.search-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
@media (max-width: 768px) {
  .search-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) { .stats-grid { grid-template-columns: 1fr; } }

/* Form inputs */
.search-group input, input[type="text"], input[type="date"], select, textarea { width: 100%; max-width: 100%; }

/* Buttons: make main actions easy to tap */
.search-section .search-btn { padding: 12px; }
@media (max-width: 576px) {
  .search-section .search-btn { width: 100%; }
}

/* Table responsiveness */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { min-width: 900px; }

/* Fallback: if table is not wrapped, allow scroll on small screens */
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead, tbody { width: 100%; }
}

/* Modal content sizing */
@media (max-width: 576px) {
  .modal-content { width: 95% !important; padding: 20px !important; }
}

/* Utility helpers */
.hide-mobile { display: none; }
@media (min-width: 577px) { .hide-mobile { display: initial; } }
@media (max-width: 576px) { .hide-desktop { display: none; } }