/*
 * Maintenance business changelists — card layout on phones + shared avatar
 * styling on every width (Slice 09).
 *
 * The layout rules are gated by `@media (max-width: 1023.98px)`, matching
 * Unfold's `lg` breakpoint: below 1024px the changelist table collapses into
 * vertical cards (one `<td>` per line, the column label repeated via the
 * `before:content-[attr(data-label)]` pseudo-element). The avatar rules at
 * the bottom are NOT gated — the header-cell photo/initials block must look
 * identical on desktop and mobile.
 *
 * Loaded globally via UNFOLD["STYLES"] (the request-mobile.css precedent) but
 * scoped so it only bites on maintenance changelists:
 *   - `body.app-maintenance.change-list`   shared rules (header cell, tap
 *                                          targets) for every maintenance list,
 *   - `body.model-<name>`                  per-list rules that silence the
 *                                          repeated label on pill columns and
 *                                          hide secondary columns on phones.
 *
 * The four business lists (requests, equipment, plans, transfers) share one
 * `display_header` first column, so `.field-display_header` styles all of
 * them with a single selector. Note: the first (linked) column is rendered
 * as `<th>`, not `<td>` — selectors must not assume `td`. Descendant
 * selectors only — Unfold 0.97.0's display_header.html opens a <span> but
 * closes a </div> (upstream bug the browser repairs), so child (`>`)
 * selectors would bind to a repaired tree.
 */

@media (max-width: 1023.98px) {
  /* ============================================================= *
   * 1. Header column becomes the card title: drop the repeated
   *    column label, left-align the text block (Unfold leaves
   *    `text-right` on mobile), and enlarge the name line.
   * ============================================================= */
  body.app-maintenance.change-list .field-display_header::before {
    content: none;
  }
  body.app-maintenance.change-list .field-display_header {
    justify-content: flex-start;
  }
  body.app-maintenance.change-list .field-display_header span.flex-col {
    text-align: left;
  }
  body.app-maintenance.change-list .field-display_header strong {
    font-size: 1rem;
    font-weight: 600;
  }

  /* ============================================================= *
   * 2. Pill columns are self-explanatory — silence their repeated
   *    "Trạng thái:" / "Loại bảo trì:" labels. The remaining
   *    columns (factory, dates, cycle, counts) keep theirs so the
   *    card still reads on its own.
   * ============================================================= */
  body.model-maintenancerequest.change-list td.field-display_maintenance_type::before,
  body.model-maintenancerequest.change-list td.field-display_stage::before,
  body.model-equipment.change-list td.field-display_x_status::before,
  body.model-maintenanceplan.change-list td.field-display_plan_status::before,
  body.model-transfer.change-list td.field-display_state::before {
    content: none;
  }

  /* ============================================================= *
   * 3. Secondary columns stay desktop-only: hide them on phones so
   *    each card holds just what a technician scans for. The data
   *    is still on the change form (and the desktop table).
   * ============================================================= */
  body.model-maintenancerequest.change-list td.field-display_requester,
  body.model-equipment.change-list td.field-display_maintenance_count,
  body.model-equipment.change-list td.field-check_tem,
  body.model-maintenanceplan.change-list td.field-display_maintenance_count,
  body.model-maintenanceplan.change-list td.field-display_maintenance_open_count {
    display: none;
  }

  /* ============================================================= *
   * 4. Tap targets / card breathing room: Unfold pins every cell to
   *    h-[45px] with overflow-hidden, which clips the multi-line
   *    header cell (a `<th>`, so plain `td` selectors miss it) —
   *    let rows grow while keeping a finger-sized minimum.
   * ============================================================= */
  body.app-maintenance.change-list #result_list tbody td,
  body.app-maintenance.change-list #result_list tbody th {
    height: auto !important;
    min-height: 44px;
  }
}

/* ============================================================= *
 * 5. Header-cell avatar (photo or initials fallback), EVERY
 *    width — desktop and phone must show the same block. Unfold
 *    draws a 32px circle (`rounded-full h-8 w-8`) for initials
 *    and a nominal 48px square for photos, but Tailwind's
 *    preflight (`img { height: auto }`) lets non-square photos
 *    render at random heights. Make both a fixed 64px block with
 *    a soft corner instead of a circle — big enough to recognize
 *    the machine at a glance, and always the same size.
 *    `span.bg-cover` is the photo wrapper, `span.uppercase` the
 *    initials box (display_header.html has no better hooks).
 * ============================================================= */
body.app-maintenance.change-list .field-display_header span.bg-cover,
body.app-maintenance.change-list .field-display_header span.uppercase {
  width: 4rem;
  min-width: 4rem;
  max-width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  flex: none;
}
body.app-maintenance.change-list .field-display_header span.uppercase {
  font-size: 1rem;
}
body.app-maintenance.change-list .field-display_header span.bg-cover img {
  /* The template hardcodes width/height="48" attributes and preflight
   * turns the height into `auto` — pin the photo to the 64px wrapper;
   * object-fit keeps the aspect by cropping instead of stretching. */
  width: 100%;
  height: 100%;
  object-fit: cover;
}