/* JJ; Corp – mobile-only layout enhancements
   Desktop layout is unchanged because everything here is scoped to small screens.
*/

@media (max-width: 760px) {
  /* Safer padding on narrow screens */
  .wrap,
  main,
  .main,
  .content,
  .page,
  .header-inner {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .wrap {
    padding-top: 1rem !important;
    padding-bottom: 1.6rem !important;
  }

  /* Common headers/toolbars stack vertically */
  .top-bar,
  .header-inner,
  .toolbar,
  .tool-bar,
  .page-head,
  .page-header,
  .head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .top-bar > *,
  .header-inner > *,
  .toolbar > *,
  .tool-bar > * {
    width: 100% !important;
  }

  /* Ensure pills don't squeeze */
  .role-pill,
  .user-pill,
  .pill {
    align-self: flex-start !important;
  }

  /* Forms: stack grids/rows */
  .grid,
  .grid-2,
  .grid-3,
  .row,
  .row-3,
  .cols,
  .two-col,
  .two-column,
  .three-column {
    grid-template-columns: 1fr !important;
  }

  /* Inputs: better tap targets + stop iOS zoom */
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
    padding: 0.55rem 0.7rem !important;
  }

  /* Filter bars stack */
  .filter-form,
  .filters,
  .filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .filter-form select,
  .filter-form input[type="text"],
  .filter-form input[type="search"],
  .filter-form button,
  .filters select,
  .filters input,
  .filters button {
    width: 100% !important;
  }

  /* Buttons: more consistent on phones */
  button,
  .btn,
  .btn-main,
  .btn-ghost,
  .primary,
  .secondary {
    min-height: 42px;
  }

  .actions,
  .btn-row,
  .button-row,
  .cta-row {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .actions button,
  .actions .btn,
  .btn-row button,
  .button-row button {
    flex: 1 1 100% !important;
  }

  /* Tables: allow sideways scroll instead of crushing columns */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    white-space: nowrap;
  }

  /* Employees admin: prevent action overlap (View/Edit vs Terminate) */
  .page-employees table td:nth-child(5),
  .page-employees table td:nth-child(6) {
    white-space: normal !important;
    min-width: 160px;
  }

  .page-employees table td:nth-child(5) form {
    display: block !important;
    margin-top: 8px !important;
  }

  .page-employees .emp-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .page-employees .emp-actions a {
    display: block;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(148,163,184,0.45);
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
  }

  /* Cards: slightly tighter, easier to scan */
  .card {
    padding: 0.9rem !important;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 1.2rem !important;
  }

  .card {
    border-radius: 0.9rem !important;
  }
}