/*
 * 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-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;
  }
}

/* ============================================================= *
 * 4b. "Người duyệt" / "Ngày duyệt" are 1600px-and-up columns.
 *
 *    User rule 2026-07-13 put them on the list, but they cost 217px
 *    of fixed width and at 1440px the table was already 1237px wide
 *    inside a 1118px column — so those two were CLIPPED by the
 *    horizontal overflow: paid for, never seen. Above 1600px there
 *    is room, so they come back. Hiding them below that also
 *    shortens the phone card by two "–" lines.
 * ============================================================= */
@media (max-width: 1599.98px) {
  body.model-maintenancerequest.change-list th.column-display_approver,
  body.model-maintenancerequest.change-list td.field-display_approver,
  body.model-maintenancerequest.change-list th.column-display_approval_date,
  body.model-maintenancerequest.change-list td.field-display_approval_date {
    display: none;
  }
}

/* ============================================================= *
 * 4c. Column widths on the request list, table view only (>=1024px
 *    — below that the table is a card stack and widths are moot).
 *
 *    Measured 2026-07-27: the short columns claimed 911-929px of
 *    fixed width at EVERY screen size, so the two columns that
 *    actually identify a row got 326px between them at 1440px. The
 *    photo alone is 64px, leaving ~80px of text — the cell wrapped
 *    to five lines and rows stood 133px tall.
 *
 *    Fix: pin the header cell to what its content needs (photo +
 *    asset code + subtitle), let the short columns shrink to their
 *    content (`width: 1%` + nowrap is the classic table trick), and
 *    leave `equipment` with NO width so it absorbs everything left.
 *    "Nhà máy" keeps wrapping — nowrap would make "Nhà máy Thuận
 *    Hưng" ~150px, wider than the 90px it needs on two lines, and
 *    the header cell is two lines anyway.
 * ============================================================= */
/* The header cell is photo-only on this list (user 2026-07-27), so kill the
 * empty text span display_header.html still emits — otherwise its `gap-4`
 * adds 16px of dead width next to the photo. Every width, table and card. */
body.model-maintenancerequest.change-list .field-display_header span.flex-col {
  display: none;
}

@media (min-width: 1024px) {
  /* First body cell is a <th>, not a <td> — no element prefix here.
   * Photo-only ⇒ just the 64px avatar plus cell padding; every pixel saved
   * here goes to "Thiết bị", which is the column carrying the words. */
  body.model-maintenancerequest.change-list th.column-display_header,
  body.model-maintenancerequest.change-list .field-display_header {
    width: 96px;
    min-width: 96px;
  }
  body.model-maintenancerequest.change-list th.column-display_maintenance_type,
  body.model-maintenancerequest.change-list td.field-display_maintenance_type,
  body.model-maintenancerequest.change-list th.column-display_stage,
  body.model-maintenancerequest.change-list td.field-display_stage,
  body.model-maintenancerequest.change-list th.column-display_due_date,
  body.model-maintenancerequest.change-list td.field-display_due_date,
  body.model-maintenancerequest.change-list th.column-display_approver,
  body.model-maintenancerequest.change-list td.field-display_approver,
  body.model-maintenancerequest.change-list th.column-display_approval_date,
  body.model-maintenancerequest.change-list td.field-display_approval_date {
    width: 1%;
    white-space: nowrap;
  }
  body.model-maintenancerequest.change-list th.column-factory,
  body.model-maintenancerequest.change-list td.field-factory {
    width: 90px;
  }
}

/* ============================================================= *
 * 5. Explicit toolbar row (admin/maintenance/_toolbar_row.html,
 *    rendered via `list_before_template`). Every tool is a
 *    labelled button; the row is mobile-first — buttons share the
 *    width and wrap, each a finger-sized 44px tall — and shrinks
 *    to content from Unfold's `lg` breakpoint up.
 *
 *    Written as plain CSS on purpose: Unfold ships a PRECOMPILED
 *    Tailwind stylesheet holding only the utilities it uses
 *    itself, and the ones this needs (`sm:w-auto`, `sm:grow-0`,
 *    `min-h-11`) are not in it. Colour / radius / border classes
 *    on the buttons ARE real Unfold utilities, so the buttons
 *    still match every other primary button in the admin.
 *
 *    Not gated by the media query above — this row exists at
 *    every width; only the flex sizing switches at 1024px.
 * ============================================================= */
body.app-maintenance.change-list .maint-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
/* Direct children are the buttons plus the saved-filters Alpine wrapper;
 * make the wrapper a flex box too so its button fills the share it gets. */
body.app-maintenance.change-list .maint-toolbar > * {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
body.app-maintenance.change-list .maint-toolbar__btn {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}
/* The primary worker action (QR scan) owns its own line on phones. */
body.app-maintenance.change-list .maint-toolbar__btn--wide {
  flex-basis: 100%;
}
/* Material Symbols default to 24px, which shouts next to 14px button text and
 * makes the qr_code_scanner glyph read as visual noise. Match the 20px inline
 * SVG upload icon instead, and thin the stroke a touch. */
body.app-maintenance.change-list .maint-toolbar__btn .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: "wght" 300;
}

@media (min-width: 1024px) {
  body.app-maintenance.change-list .maint-toolbar > *,
  body.app-maintenance.change-list .maint-toolbar__btn,
  body.app-maintenance.change-list .maint-toolbar__btn--wide {
    flex: 0 0 auto;
  }
}

/* ============================================================= *
 * 6. 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;
}

/* ============================================================= *
 * 7. Phone cards on EVERY maintenance changelist.
 *
 *    Unfold's table-to-block transform gives each cell a
 *    full-width 45px row with its own divider, and pushes the
 *    `data-label` to the opposite edge with `mr-auto`. Measured on
 *    the request list at 390px that cost 352px PER CARD — 7 rows
 *    for 5 facts, one of them the untranslated "Select Record"
 *    label, another a 77px band holding a 64px photo — so barely
 *    1.3 tickets fit on a screen.
 *
 *    Three rules from the user (2026-07-27, after seeing it):
 *      1. a field with no value is hidden,
 *      2. ONE field per line,
 *      3. the field label starts with a capital letter.
 *
 *    Rules 1 and 3 cannot be done in CSS — an empty cell contains
 *    the literal "-" so `:empty` never matches, and there is no
 *    capfirst (`capitalize` gives "Nhà Máy", and
 *    `::before::first-letter` is unsupported — measured). Both are
 *    handled once by maintenance/js/changelist-card.js, which
 *    capfirsts `data-label` and tags value-less cells with
 *    `.maint-cell-empty`. This file keeps the layout: one line per
 *    field, no dividers, no 45px floor, label in FRONT of the
 *    value, checkbox in the corner, photo pinned left.
 *
 *    Scoped to `body.app-maintenance.change-list`, so a list added
 *    later is a card without anyone remembering to opt in.
 * ============================================================= */
@media (max-width: 1023.98px) {
  body.app-maintenance.change-list #result_list tbody tr.data-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    /* right padding clears the pinned checkbox */
    padding: 10px 38px 10px 12px;
  }

  /* One field per line, and that is the whole line: no divider, no 45px
   * floor, no padding of its own. `height` / `min-height` also undo section
   * 4, which pinned every cell to a 44px tap target — the card itself is the
   * tap target now. */
  body.app-maintenance.change-list #result_list tbody tr.data-row > td,
  body.app-maintenance.change-list #result_list tbody tr.data-row > th {
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0;
    padding: 0;
    border-top: 0;
    overflow: visible;
    /* Unfold puts `gap-4` (16px) on the cell; it lands between the label
     * pseudo-element and the value and reads as a stray indent. */
    gap: 4px;
    /* Unfold centres the cell's items; on a value that wraps to three lines
     * that leaves the label floating in the middle of them. */
    align-items: flex-start;
  }

  /* RULE 1 — a field with no value is not a line at all. Tagged by
   * changelist-card.js because the cell holds a literal "-"; only hidden
   * here, so the desktop table keeps its "-" and no column looks broken. */
  body.app-maintenance.change-list #result_list tbody tr.data-row > .maint-cell-empty {
    display: none !important;
  }

  /* RULE 3 — the label sits in FRONT of the value (Unfold's `mr-auto` shoves
   * it to the far edge) and keeps the capital first letter that
   * changelist-card.js gave it: no `capitalize`, which would yield
   * "Nhà Máy". `.field-display_header` is excluded — section 1 blanks its
   * label on purpose, and a "Thiết bị:" in front of the photo shoves the
   * photo off the left edge of the card. */
  body.app-maintenance.change-list #result_list tbody tr.data-row > td::before,
  body.app-maintenance.change-list #result_list tbody tr.data-row > th:not(.field-display_header)::before {
    content: attr(data-label) ":" !important;
    margin-right: 0;
    margin-left: 0;
    font-weight: 400;
    text-transform: none;
    white-space: nowrap;
    opacity: 0.6;
  }

  /* Select checkbox: corner, no label. It still ticks for the row-selection
   * actions (Xuất Excel), it just stops eating a whole line. */
  body.app-maintenance.change-list #result_list tbody tr.data-row > td.action-checkbox {
    position: absolute;
    top: 10px;
    right: 12px;
    width: auto;
    z-index: 1;
  }
  body.app-maintenance.change-list #result_list tbody tr.data-row > td.action-checkbox::before {
    display: none;
  }

  /* The identity cell (photo + name + subtitle) is the card's first line. */
  body.app-maintenance.change-list #result_list tbody tr.data-row > .field-display_header {
    font-weight: 500;
  }

  /* ---- REQUEST LIST ONLY --------------------------------------------
   * Its identity cell is photo-only (96px column on desktop), so it leaves
   * the flow: the photo is pinned left and every line sits to the RIGHT of
   * it instead of below it. That is the one wasted row the generic layout
   * cannot avoid, and this list is the one workers live in. */
  body.model-maintenancerequest.change-list #result_list tbody tr.data-row {
    padding-left: 88px;
    min-height: 88px;
  }
  body.model-maintenancerequest.change-list #result_list tbody tr.data-row > .field-display_header {
    position: absolute;
    top: 10px;
    left: 12px;
    width: auto;
  }
}

/* ============================================================= *
 * 8. A ticked row greys out — the WHOLE row, not its text lines.
 *
 *    Unfold paints the selection as
 *      `table tr.selected td, table tr.selected th
 *         { background-color: color-mix(in oklab, var(--color-yellow-200) 10%, transparent) }`
 *    i.e. a faint yellow on each CELL. On a phone card that reads
 *    as "some text lines got highlighted" rather than "this record
 *    is selected", because the card's padding and its pinned photo
 *    are not cells and stay unpainted. User 2026-07-27: drop the
 *    yellow, grey the whole record instead.
 *
 *    So: paint the <tr> (which covers the padding and the pinned
 *    photo too) and blank the cell backgrounds so the yellow cannot
 *    show through. Every width: the desktop table gets the same
 *    grey, so selection reads the same on both.
 *
 *    Grey level matters here. Unfold zebra-stripes the list by
 *    putting `bg-base-50` on the <tbody> WRAPPING EACH ROW (one
 *    tbody per row — measured), so base-50 and base-100 are both
 *    too close to the stripe to read as "selected" on every other
 *    card. base-200 is unmistakable against both a white card and a
 *    striped one, and still reads as grey-white.
 * ============================================================= */
body.app-maintenance.change-list #result_list tbody tr.selected {
  background-color: var(--color-base-200);
}
body.app-maintenance.change-list #result_list tbody tr.selected > td,
body.app-maintenance.change-list #result_list tbody tr.selected > th {
  background-color: transparent;
}

.dark body.app-maintenance.change-list #result_list tbody tr.selected {
  background-color: var(--color-base-700);
}