/* JJ; Corp – layout-only fixes (mobile + desktop safe) */

/* Fix the "extra pixels to the right" + inputs overflowing their containers */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Form controls should never exceed their columns */
input, select, textarea, button { max-width: 100%; min-width: 0; }

/* iOS / Safari sometimes forces light backgrounds on some inputs (esp number/date) */
input[type="number"],
input[type="date"],
input[type="time"],
input[inputmode="decimal"],
input[inputmode="numeric"] {
  background-color: #020617 !important;
  color: inherit;
  color-scheme: dark;
}

/* Slightly more breathing room between side-by-side fields */
.form-row,
.row,
.grid,
.form-grid,
.two-col,
.cols,
.fields,
.field-row {
  gap: 14px !important;
}

/* When tables are wider than the card, scroll INSIDE the card, not the whole page */
.table-scroll,
.table-wrap,
.card,
.panel,
.section {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Help tables size naturally. Mobile nowrap prevents giant row heights. */
table { max-width: 100%; }
@media (max-width: 760px) {
  table { width: max-content; min-width: 100%; }
  th, td { white-space: nowrap; }
}

/* Mobile: stack form rows/grids without changing desktop */
@media (max-width: 760px) {
  .top-bar,
  .actions,
  .filters,
  .filter-bar,
  .btn-row {
    flex-wrap: wrap !important;
  }

  /* Common grids */
  .grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Common flex rows */
  .form-row,
  .row,
  .two-col,
  .cols {
    flex-direction: column !important;
  }

  button,
  .btn,
  .button,
  input[type="submit"],
  input[type="button"] {
    width: 100% !important;
  }
}


/* Employees Admin: prevent Status/Terminate from bleeding into Details on small screens */
@media (max-width: 760px) {
  .page-employees table td:nth-child(5) {
    white-space: normal;
    min-width: 160px;
  }
  .page-employees table td:nth-child(5) form {
    display: block !important;
    margin-top: 8px !important;
  }
  .page-employees table td:nth-child(5) .btn {
    width: 100% !important;
    max-width: 150px;
  }
}