/* GENERATED by scripts/build-astryx-assets.mjs. Do not edit. */
@layer app {
  @media (max-width: 1023px) {
    /* The Actions column's proportional share puts an inline min-width on the
       table, which only !important outranks, and every cell has max-width 0
       for the fixed layout. Neither applies to a stacked row. */
    .admin-reservations { min-width: 0 !important; }
    .admin-reservations, .admin-reservations tbody { display: block; width: 100%; }
    .admin-reservations thead {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
    .admin-reservations tbody tr {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "id name status"
        "link link link"
        "email email email"
        "requested requested requested"
        "confirmed confirmed confirmed"
        "actions actions actions";
      align-items: start;
      column-gap: var(--spacing-2);
      row-gap: var(--spacing-1);
      padding: var(--spacing-4) 0;
    }
    .admin-reservations tbody tr + tr { border-top: 1px solid var(--color-border); }
    .admin-reservations tbody td {
      display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--spacing-1);
      width: auto; min-width: 0; max-width: none; padding: 0; border: 0; overflow-wrap: anywhere;
    }
    .admin-reservations tbody td > * { min-width: 0; }

    .admin-reservations td:nth-child(1) { grid-area: id; column-gap: 0; color: var(--color-text-secondary); }
    .admin-reservations td:nth-child(1)::before { content: "#"; }
    .admin-reservations td:nth-child(2) { grid-area: link; }
    .admin-reservations td:nth-child(3) { grid-area: name; font-weight: var(--font-weight-semibold); }
    .admin-reservations td:nth-child(4) { grid-area: email; }
    .admin-reservations td:nth-child(5) { grid-area: requested; }
    .admin-reservations td:nth-child(6) { grid-area: status; justify-content: flex-end; }
    .admin-reservations td:nth-child(7) { grid-area: confirmed; }
    .admin-reservations td:nth-child(8) { grid-area: actions; padding-top: var(--spacing-2); }
    .admin-reservations td:nth-child(5)::before,
    .admin-reservations td:nth-child(7)::before { color: var(--color-text-secondary); }
    .admin-reservations td:nth-child(5)::before { content: "Requested"; }
    .admin-reservations td:nth-child(7)::before { content: "Confirmation email"; }
  }
}