/* ── Mobile Optimizations (global) ── */

/* Modals: near-fullscreen on small screens */
@media (max-width: 640px) {
  .veh-modal-overlay,
  .wb-modal {
    padding: 8px;
  }

  .veh-modal,
  .wb-modal__dialog {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 12px;
  }

  .veh-modal__header,
  .wb-modal__header {
    padding: 14px 16px;
  }

  .veh-modal__form,
  .wb-modal__body {
    padding: 16px;
  }

  .veh-modal__title,
  .wb-modal__title {
    font-size: 16px;
  }
}

/* Tables: horizontal scroll wrapper */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  thead { white-space: nowrap; }

  td {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* Form inputs: taller for touch */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  textarea,
  select {
    min-height: 42px;
    font-size: 16px; /* Prevent iOS zoom on focus */
  }
}

/* Buttons: larger touch targets */
@media (max-width: 640px) {
  button, .btn, [type="button"], [type="submit"] {
    min-height: 40px;
  }
}

/* Hide scrollbar utility */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Dashboard mobile tweaks */
@media (max-width: 640px) {
  .dash-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash-header__actions { width: 100%; }
}

/* Vehicles mobile tweaks */
@media (max-width: 640px) {
  .veh-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .veh-header__right { flex-direction: column; gap: 8px; }
  .veh-header__right .veh-search { width: 100%; }
  .veh-header__right .veh-search__input { width: 100%; }

  .veh-card { border-radius: 10px; }
  .veh-card__body { padding: 12px; }
}

/* Vehicle detail mobile — see vehicles.css for comprehensive rules */

/* Workboard mobile tweaks */
@media (max-width: 640px) {
  .wb-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .wb-header__right { flex-direction: column; gap: 8px; }
  .wb-search__input { width: 100%; }
  .wb-add-btn { width: 100%; justify-content: center; }
}

/* Team page mobile */
@media (max-width: 640px) {
  .team-header { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* Parts page mobile */
@media (max-width: 640px) {
  .parts-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .parts-header__right { width: 100%; }
}

/* Expenses page mobile */
@media (max-width: 640px) {
  .exp-header { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* Settings mobile */
@media (max-width: 640px) {
  .set-section { padding: 14px; }
  .set-row { flex-direction: column; gap: 4px; }
  .set-row__label { min-width: 0; }
}

/* Timeclock mobile */
@media (max-width: 480px) {
  .tc-member { flex-direction: column; text-align: center; }
  .tc-member__actions { width: 100%; justify-content: center; }
}

/* Timesheet mobile */
@media (max-width: 480px) {
  .ts-toolbar { flex-direction: column; gap: 8px; }
  .ts-toolbar__right { width: 100%; }
}

/* Dispatch (wbv2) mobile */
@media (max-width: 640px) {
  .wbv2-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .wbv2-header__right { width: 100%; overflow-x: auto; }
  .wbv2-add-btns { width: 100%; }
}

/* Logs mobile */
@media (max-width: 640px) {
  .logs-filters__row { flex-direction: column; }
  .logs-filters__select,
  .logs-filters__date { width: 100%; }
}

/* Safe area insets for notched phones */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  @media (max-width: 920px) {
    .main {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}