/*
 * Maintenance change forms — shared mobile layout (Slice 10).
 *
 * The request form got its own mobile treatment first (request-mobile.css,
 * `.req-*` classes). This file generalises the same ideas to EVERY maintenance
 * change form (equipment, plan, transfer, …) so they stop overflowing sideways
 * on a phone and read as one consistent design:
 *   - a horizontal-overflow fix (the classic flex `min-width:0`),
 *   - single-column fields,
 *   - a status pill strip that scrolls horizontally instead of wrapping,
 *   - the fieldset tab strip turned into a tap-to-open accordion (`mform-acc*`),
 *   - a sticky "Save" bar at the bottom.
 *
 * Loaded globally via UNFOLD["STYLES"] but scoped to `body.app-maintenance
 * .change-form`, and every layout rule is gated by `@media (max-width: 768px)`
 * so the desktop form is untouched. Alpine (bundled with Unfold) drives the
 * accordion open/close; the markup lives in each form's change_form.html.
 *
 * The request form keeps its own `.req-*` implementation (already shipped and
 * tested); the generic overflow / single-column rules below also cover it
 * harmlessly (same declarations it already sets for itself).
 */

/* Accordion headers exist in the DOM at every width but only show on mobile. */
.mform-acc-header {
  display: none;
}

@media (max-width: 768px) {
  /* ============================================================= *
   * 1. Kill the sideways scroll. Unfold leaves form modules / rows
   *    at `min-width: min-content`, so one long value keeps the
   *    whole form wider than the screen and the page pans sideways
   *    (cutting off labels, the photo, the status pills). Let them
   *    shrink to the viewport.
   * ============================================================= */
  body.app-maintenance.change-form .module,
  body.app-maintenance.change-form .form-row,
  body.app-maintenance.change-form .field-row,
  body.app-maintenance.change-form .field-line,
  body.app-maintenance.change-form fieldset {
    min-width: 0 !important;
  }

  /* ============================================================= *
   * 2. Single-column fields: Unfold's compressed two-up grid is
   *    forced to one field per row on a phone.
   * ============================================================= */
  body.app-maintenance.change-form .fieldset .flex.flex-row.flex-wrap {
    flex-direction: column !important;
  }
  body.app-maintenance.change-form .fieldset .flex.flex-row.flex-wrap > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ============================================================= *
   * 3a. Header bar (generated-requests stat + status pill strip)
   *     stacks vertically on a phone: the stat card on top (full
   *     width), the status strip right below it (full width) — as in
   *     the mockup. Without this the `flex-wrap` row leaves the short
   *     pill strip vertically off-centre beside the taller stat
   *     button instead of sitting between it and the first section.
   * ============================================================= */
  .mform-header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    /* Balance the strip's vertical rhythm: the gap above it (stat card →
     * strip) is 12px (`gap-3`), but the bar's `mb-6` left 24px below it
     * before "Thông tin chung". 8px margin + the strip's own 4px
     * scrollbar padding = the same 12px below. (`!important`: the mb-6
     * utility loads after this sheet.) */
    margin-bottom: 0.5rem !important;
  }

  /* ============================================================= *
   * 3b. Status pill strip — one tidy left-aligned row that scrolls
   *    horizontally instead of wrapping and right-aligning. The
   *    form_top block adds `mform-status-strip` to the pill row.
   * ============================================================= */
  .mform-status-strip {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    gap: 8px !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mform-status-strip::-webkit-scrollbar {
    display: none;
  }
  .mform-status-strip > * {
    flex: none;
  }

  /* ============================================================= *
   * 4. Tab strip → accordion. The desktop nav (`mform-tab-strip`)
   *    is hidden; each `mform-acc-header` becomes a tap-to-open
   *    card, styled to match the request form's accordion.
   * ============================================================= */
  .mform-tabs .mform-tab-strip {
    display: none;
  }
  .mform-tabs .mform-acc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 15px 16px;
    background: var(--color-base-50, #f8fafc);
    border: 1px solid var(--color-base-200, #e2e8f0);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-font-important-light, #1e293b);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .dark .mform-tabs .mform-acc-header {
    background: var(--color-base-800, #1e293b);
    border-color: var(--color-base-700, #334155);
    color: var(--color-font-important-dark, #f1f5f9);
  }
  .mform-tabs .mform-acc-header:first-of-type {
    margin-top: 0;
  }
  .mform-tabs .mform-acc-header.is-open {
    border-color: var(--color-primary-500, #7c3aed);
  }
  .mform-tabs .mform-acc-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .mform-tabs .mform-acc-chevron {
    flex: none;
    transition: transform 0.2s ease;
    color: var(--color-base-400, #94a3b8);
  }
  .mform-tabs .mform-acc-header.is-open .mform-acc-chevron {
    transform: rotate(180deg);
    color: var(--color-primary-500, #7c3aed);
  }
  .mform-tabs .mform-acc-badge {
    flex: none;
  }
  .mform-tabs .tab-wrapper {
    padding: 12px 2px 4px;
  }

  /* ============================================================= *
   * 4b. Polish (from the F12 mobile review):
   *     - Unfold separates compressed field rows with DASHED borders,
   *       which read as unfinished on the phone card — make them thin
   *       solid hairlines.
   *     - FK autocomplete rows: select2 stamps a fixed pixel width on
   *       its container (computed at DOM-ready), so selects end short
   *       of the right edge while plain text inputs run the full
   *       width — a ragged right margin. Let the wrapper flex and
   *       force the select2 container to fill it (external
   *       !important beats the inline style).
   * ============================================================= */
  body.app-maintenance.change-form .border-dashed {
    border-style: solid !important;
  }
  body.app-maintenance.change-form .related-widget-wrapper {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  body.app-maintenance.change-form .related-widget-wrapper .select2 {
    width: 100% !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ============================================================= *
   * 4c. Accordion frame: Unfold's `fieldset_rows_classes` draws ONE
   *     big card border around the whole tab group, which boxes in
   *     all the section cards. Drop that outer frame on the phone —
   *     each section header is already its own card — and give only
   *     the OPEN section a full outline: the header keeps its
   *     (primary) border and the panel continues it down the sides
   *     and bottom, closing the card under the content. Applies to
   *     the request form's `.req-*` accordion too, so all four
   *     forms read the same. (`!important` because Unfold's utility
   *     classes load after this sheet.)
   * ============================================================= */
  .mform-tabs,
  .req-tabs {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .mform-tabs .mform-acc-header.is-open,
  .req-tabs .req-acc-header.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .mform-tabs .mform-acc-header.is-open + .tab-wrapper,
  .req-tabs .req-acc-header.is-open + .tab-wrapper {
    border: 1px solid var(--color-primary-500, #7c3aed);
    border-top: 0;
    border-radius: 0 0 14px 14px;
  }

  /* ============================================================= *
   * 4d. Breadcrumb: on a phone the full trail truncates each crumb
   *     to a couple of letters ("B… › Th… › Laptop ti…"). Ancestor
   *     crumbs are reachable via Back / the sidebar, so show ONLY
   *     the last crumb (the current record), full width. Crumb
   *     elements carry `tracking-tight`; the `›` separators are the
   *     only material icons inside the header h1.
   * ============================================================= */
  body.app-maintenance.change-form h1 .tracking-tight,
  body.app-maintenance.change-form h1 .material-symbols-outlined {
    display: none;
  }
  body.app-maintenance.change-form h1 .tracking-tight:last-child {
    display: inline-block;
  }

  /* ============================================================= *
   * 5. Sticky "Save" bar. Django's submit row is pinned to the
   *    bottom of the viewport so "Lưu" is always within thumb
   *    reach, matching the mockup. `z-index` keeps it above the
   *    form; the safe-area padding clears the phone's home bar.
   * ============================================================= */
  body.app-maintenance.change-form .submit-row {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 16px -1rem 0;
    padding: 12px 1rem calc(12px + env(safe-area-inset-bottom));
    background: var(--color-base-50, #f8fafc);
    border-top: 1px solid var(--color-base-200, #e2e8f0);
  }
  .dark body.app-maintenance.change-form .submit-row {
    background: var(--color-base-900, #0f172a);
    border-top-color: var(--color-base-800, #1e293b);
  }
}

/* ============================================================= *
 * 5b. Inline headings inside re-tabbed panels, EVERY width. The
 *     tab / accordion header already names the section ("Thành
 *     phần", "Lịch sử sử dụng", …); Unfold's inline template
 *     repeats it as an <h2 id="<prefix>-heading"> inside the panel
 *     (it only auto-hides for `tab = True` inlines, and ours are
 *     re-tabbed by hand with `tab = False`). Hide the duplicate.
 * ============================================================= */
.mform-tabs .tab-wrapper h2[id$="-heading"],
.req-tabs .tab-wrapper h2[id$="-heading"] {
  display: none;
}

/* ============================================================= *
 * 6. Equipment image field — a thumbnail + action buttons instead
 *    of the raw ClearableFileInput path, at EVERY width (desktop
 *    and phone show the same block). The markup comes from
 *    _image_field.html. Colours use Unfold's CSS variables.
 * ============================================================= */
.eqimg {
  display: flex;
  align-items: center;
  gap: 14px;
}
.eqimg-thumb {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-base-200, #e2e8f0);
  background: var(--color-base-100, #f1f5f9);
  flex: none;
}
.dark .eqimg-thumb {
  border-color: var(--color-base-800, #1e293b);
  background: var(--color-base-800, #1e293b);
}
.eqimg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.eqimg-meta {
  min-width: 0;
  flex: 1 1 auto;
}
.eqimg-label {
  font-size: 12px;
  color: var(--color-base-500, #64748b);
  margin-bottom: 6px;
}
.dark .eqimg-label {
  color: var(--color-base-400, #94a3b8);
}
.eqimg-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.eqimg-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--color-base-200, #e2e8f0);
  background: var(--color-base-white, #fff);
  color: var(--color-font-important-light, #1e293b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.dark .eqimg-btn {
  background: var(--color-base-900, #0f172a);
  border-color: var(--color-base-700, #334155);
  color: var(--color-font-important-dark, #f1f5f9);
}
.eqimg-btn .material-symbols-outlined {
  font-size: 16px;
}
.eqimg-btn-danger {
  color: var(--color-red-600, #dc2626);
  border-color: color-mix(in srgb, var(--color-red-600, #dc2626) 30%, var(--color-base-200, #e2e8f0));
}
/* When the delete checkbox is ticked the thumbnail dims + the badge shows. */
.eqimg.is-del .eqimg-thumb img {
  opacity: 0.3;
  filter: grayscale(1);
}
.eqimg-native {
  /* The real Django file input + clear checkbox: kept in the DOM (so the form
   * still posts) but visually hidden; the buttons above drive it. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.eqimg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 1.5rem;
  cursor: zoom-out;
}
.eqimg-lightbox img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 0.5rem;
}