/* Small overrides on top of Tailwind (CDN) to match the reference UI:
   uppercase labels, minimal black/white palette, touch-friendly controls. */

input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="time"] {
  min-height: 40px;
}

table {
  border-collapse: collapse;
}

/* Smooth fade during htmx-driven tab/page-nav swaps (used together with
   hx-swap="... swap:150ms settle:150ms" on the triggering elements). */
/* #record-sheet-root,
#contracts-table > * {
  transition: opacity 150ms ease-in-out;
}
#record-sheet-root.htmx-swapping,
#record-sheet-root.htmx-settling,
#contracts-table > .htmx-swapping,
#contracts-table > .htmx-settling {
  opacity: 0;
} */

.label-caps {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280; /* gray-500 */
}

/* Touch targets on mobile */
button, a.btn, input[type="submit"] {
  touch-action: manipulation;
}

@media (max-width: 640px) {
  table.reflow-table thead { display: none; }
  table.reflow-table, table.reflow-table tbody, table.reflow-table tr, table.reflow-table td {
    display: block;
    width: 100%;
  }
  table.reflow-table tr {
    border: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
  }
  table.reflow-table td {
    padding: 0.4rem 0.75rem;
  }
  table.reflow-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
  }
}