/* Tailwind is loaded from CDN in _Layout. This file holds the few things utility classes can't
   express: pseudo-element content and the table-to-card reflow.

   The breakpoint below is 767px — one pixel under Tailwind's `md` (768px) — so "cards" and
   "table" can never both apply. If you change one, change the other. */

/* ---------------------------------------------------------------------------
   Touch targets on phones
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* 44px is the usual minimum comfortable touch target; the inline Tailwind classes on these
       controls land around 32-38px. Listed by type rather than a blanket `input` so checkboxes and
       radios keep their natural size. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        min-height: 44px;
        /* iOS Safari zooms the whole page when focusing a control whose font-size is under 16px,
           and every field here is text-sm (14px). Bumping to 16px on small screens is what stops
           that jarring zoom-and-reflow on tap — it is not a cosmetic choice. */
        font-size: 16px;
    }

    /* Native date/time controls size to their content and end up oddly narrow beside a full-width
       text field. The picker itself stays native — it's the best one on a phone. */
    input[type="date"],
    input[type="time"] {
        width: 100%;
    }

    /* A 44px hit area around a control that must stay visually small — the checkboxes that are the
       whole point of a row in the alert-subscription tables. The checkbox keeps its own size; the
       LABEL wrapping it is what grows, and tapping a label activates the control inside it.
       Deliberately opt-in rather than a blanket rule on every checkbox: the dense roles/labs
       checkbox lists on the Users page rely on their natural size to stay readable. */
    .tap-target {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }
}

/* ---------------------------------------------------------------------------
   .stack-table — a real table from `md` up, cards below it
   ---------------------------------------------------------------------------
   One render path, not two. The JS keeps emitting ordinary <tr>/<td>; each cell carries
   data-label="Column name" and CSS pulls that into a pseudo-element on small screens. A separate
   mobile card renderer would double the markup and drift out of sync with the table the first time
   someone added a column.

   Cell opt-outs (set data-stack on the <td>):
     data-stack="title"  heading line for the card — no label, full width
     data-stack="full"   full-width block, no label (long text, action rows)
   A cell with no data-label renders without a label automatically.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .stack-table thead {
        /* Clipped rather than display:none so the header text stays available to screen readers. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .stack-table,
    .stack-table tbody,
    .stack-table td {
        display: block;
        width: auto;
    }

    /* flex column rather than block so `order` works on cells: it lets a card promote one field to
       its heading WITHOUT the JS reordering <td>s, which would misalign every column against its
       <thead> on desktop. */
    .stack-table tr {
        display: flex;
        flex-direction: column;
        width: auto;
        border: 1px solid #e2e8f0;      /* slate-200, matching the table's row dividers */
        border-radius: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.625rem;
    }

    .stack-table tr:last-child {
        margin-bottom: 0;
    }

    /* Label left, value right — scannable as a key/value list. */
    .stack-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.1875rem 0;
        text-align: right;
        border: 0 !important;           /* the row border is the card outline now */
    }

    .stack-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #6b6b6b;                 /* atg-charcoal-soft */
    }

    .stack-table td:not([data-label])::before,
    .stack-table td[data-label=""]::before,
    .stack-table td[data-stack="title"]::before,
    .stack-table td[data-stack="full"]::before {
        content: none;
    }

    .stack-table td[data-stack="title"] {
        display: block;
        order: -1;                      /* heading first, wherever the cell sits in the row */
        text-align: left;
        font-weight: 700;
        padding-bottom: 0.375rem;
    }

    .stack-table td[data-stack="full"] {
        display: block;
        text-align: left;
    }

    /* The wrapper exists only to allow sideways scrolling of a wide table. Cards don't need it, and
       leaving it on can trap vertical touch scrolling on some Android browsers. */
    .stack-table-wrap {
        overflow-x: visible !important;
    }
}