/* IAS supplemental styles on top of PicoCSS. */

.login-card { max-width: 24rem; margin: 4rem auto; }
.error, .error-card { color: var(--pico-del-color, #b3261e); }
.warn { color: #8a6d00; }

form.inline { margin: 0; display: inline; }
label.inline { display: inline-flex; gap: .3rem; margin-right: 1rem; }

.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

article > footer small { color: var(--pico-muted-color); }

/* Global loading state: HTMX adds .htmx-request to the element that triggered a
   request. Show a spinner on it (and on the submit button of a posting form) so
   EVERY button gives visible feedback while in flight. */
@keyframes ias-spin { to { transform: rotate(360deg); } }

button.htmx-request,
[role="button"].htmx-request,
form.htmx-request button:not([type="button"]) {
  pointer-events: none;
  opacity: .65;
  cursor: progress;
}
button.htmx-request::after,
[role="button"].htmx-request::after,
form.htmx-request button:not([type="button"])::after {
  content: "";
  display: inline-block;
  width: .8em; height: .8em;
  margin-left: .5em;
  vertical-align: -.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ias-spin .6s linear infinite;
}

/* Parent top nav: wraps on small screens; highlight the active page. */
.parent-nav { flex-wrap: wrap; }
.parent-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; }

/* Wide data tables scroll horizontally instead of breaking the page layout. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin-bottom: 0; }

/* Week-grid editor: compact, top-aligned cells. */
#week-grid td { vertical-align: top; }
#week-grid input[type=time], #week-grid select { margin: 0 0 .25rem; }

/* Nanny clock buttons: large touch targets, three across. */
.nanny .clock-buttons { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.nanny .clock-buttons button {
  font-size: 1.1rem; padding: 1rem .4rem; min-height: 3.5rem;
}

/* ---- Mobile tuning ---- */
@media (max-width: 640px) {
  :root { --pico-spacing: .75rem; }
  main.container { padding: .75rem; }

  /* Inputs must be >=16px or iOS Safari zooms in on focus. */
  input, select, button, textarea { font-size: 16px; }

  /* Stack the top nav (title + logout) instead of squeezing it. */
  nav { flex-wrap: wrap; gap: .25rem; }
  nav ul { flex-wrap: wrap; }

  /* Action button rows go full width and split evenly. */
  .actions { width: 100%; }
  .actions button { flex: 1 1 auto; }

  article { margin-bottom: 1rem; }
}