/*
 * Maintenance request — mobile-only layout.
 *
 * Every rule here is gated by `@media (max-width: 768px)`, so the desktop
 * change form is untouched. Loaded globally via UNFOLD["STYLES"] but scoped so
 * it only bites on the maintenance request form:
 *   - `.req-tabs`               a marker class added to the tab container in
 *                               admin/maintenance/maintenancerequest/change_form.html
 *                               (no other screen has it),
 *   - `.req-stage-strip`        the Odoo-style stage pill row (form_top), and
 *   - `body.model-maintenancerequest`  for the always-visible "General" fieldset
 *                               that sits above the tab container.
 *
 * On a phone the horizontal tab strip becomes a vertical accordion (each tab a
 * tap-to-open card) and every field goes single-column. The "Checklist items" /
 * "Request materials" tabs are read-only lists edited via popup (styled in
 * change_form.html), so they need no per-cell rules here.
 */

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

@media (max-width: 768px) {
  /* ============================================================= *
   * 1. Stage pill row — one tidy left-aligned strip that scrolls
   *    horizontally instead of wrapping and right-aligning.
   * ============================================================= */
  .req-stage-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;
  }
  .req-stage-strip::-webkit-scrollbar {
    display: none;
  }
  .req-stage-strip > span {
    flex: none;
  }

  /* ============================================================= *
   * 2. Tab strip → accordion.
   * ============================================================= */
  .req-tabs .req-tab-strip {
    display: none;
  }

  .req-tabs .req-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 .req-tabs .req-acc-header {
    background: var(--color-base-800, #1e293b);
    border-color: var(--color-base-700, #334155);
    color: var(--color-font-important-dark, #f1f5f9);
  }
  .req-tabs .req-acc-header:first-of-type {
    margin-top: 0;
  }
  .req-tabs .req-acc-header.is-open {
    border-color: var(--color-primary-500, #6366f1);
  }
  .req-tabs .req-acc-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .req-tabs .req-acc-chevron {
    flex: none;
    transition: transform 0.2s ease;
    color: var(--color-base-400, #94a3b8);
  }
  .req-tabs .req-acc-header.is-open .req-acc-chevron {
    transform: rotate(180deg);
  }
  .req-tabs .req-acc-badge {
    flex: none;
  }

  /* Panel = the card body directly under its (open) header. */
  .req-tabs .tab-wrapper {
    padding: 12px 2px 4px;
  }

  /* ============================================================= *
   * 3. Single-column fields, both in the panels and in the always
   *    -visible General fieldset. Unfold's compressed two-up grid
   *    is forced to one column on a phone.
   * ============================================================= */
  /* Fieldset panels sit in a flex column; Unfold leaves them
     `min-width: min-content`, so a long field value keeps the fieldset wider
     than the screen and the whole page scrolls sideways. Let them shrink to
     the viewport (the classic flex min-width:auto overflow fix). Pre-existing
     on this form; contained here for phones. */
  body.model-maintenancerequest .module,
  body.model-maintenancerequest .form-row,
  body.model-maintenancerequest .field-row,
  body.model-maintenancerequest .field-line {
    min-width: 0 !important;
  }

  .req-tabs .tab-wrapper .flex.flex-row.flex-wrap,
  body.model-maintenancerequest .fieldset .flex.flex-row.flex-wrap {
    flex-direction: column !important;
  }
  .req-tabs .tab-wrapper .flex.flex-row.flex-wrap > *,
  body.model-maintenancerequest .fieldset .flex.flex-row.flex-wrap > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The "Checklist items" / "Request materials" tabs are read-only lists
     (change_form.html extrahead styles them), not inline tables, so they need
     no per-cell mobile rules here — only the accordion + single-column fields
     above apply. */
}