/* OZ.tools mobile responsive overrides for login, invite/accept, and company pages. */

@media (max-width: 480px) {
  /* Forms and content containers */
  .ds-wrap,
  .ds-wrap-wide {
    padding: 16px;
  }

  /* Login page */
  .ds-login-box,
  .ds-card,
  form {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Inputs: prevent iOS zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea,
  .ds-input {
    font-size: 16px;
  }

  /* Buttons: minimum touch target */
  button,
  .ds-btn,
  a.ds-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Modals: full-width minus margin */
  .ds-modal {
    min-width: unset !important;
    max-width: unset !important;
    width: calc(100vw - 32px) !important;
    margin: 16px;
    box-sizing: border-box;
  }

  /* Company page sections */
  .ds-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* EUR-warning and migration modals */
  #eur-warning-modal .ds-modal,
  #leave-modal .ds-modal,
  #manager-leave-modal .ds-modal {
    width: calc(100vw - 32px) !important;
    min-width: unset !important;
  }

  /* Header nav collapse */
  .ds-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Onboarding banner */
  .oz-onboarding-banner {
    padding: 12px 16px;
  }

  .oz-onboarding-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}