/**
 * FCBH Zammad ticket forms — responsive / mobile styles.
 *
 * Loaded as a real enqueued stylesheet (see fcbh_zammad_enqueue_scripts() in the
 * main plugin file). Desktop layout lives in each form's own <style> block; this
 * file only adds mobile overrides.
 *
 * Simple forms (audio/biblebrain/blimp/virtualrecording) define their grid via an
 * INLINE style on the wrapper div, so the collapse rules use !important to win over
 * that inline declaration (the inline styles carry no !important, so this is safe).
 * Simple forms are matched by [data-fcbh-action]; render/vessel by id.
 */

/* Ensure the post-submit / error overlays sit above sticky theme headers,
   nav bars, and floating buttons. Applies on all screen sizes. */
.fcbh-modal-overlay { z-index: 2147483000 !important; }

/* "Clear attachments" button — subtle secondary style, shown only when files
   are selected. The theme styles all <button>s (often with !important), so these
   overrides use !important to keep it looking like a small secondary control and
   to guarantee it stays hidden when it has the .fcbh-hidden class. */
.fcbh-clear-att.fcbh-hidden { display: none !important; }
.fcbh-clear-att {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.85em !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  color: #b02a2a !important;
  background: transparent !important;
  border: 1px solid #d9a5a5 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
}
.fcbh-clear-att:hover,
.fcbh-clear-att:focus {
  background: #fbeaea !important;
  border-color: #b02a2a !important;
  color: #8f1f1f !important;   /* keep dark-red text on hover (theme turns it white) */
}

/* Attachment status text: wrap long filenames instead of forcing overflow. */
[id$="-att-status"] {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Put the file selector and the clear button on the same row. */
.fcbh-att-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fcbh-att-row { max-width: 100%; }
.fcbh-att-row input[type="file"] {
  width: auto !important;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {

  /* ── Collapse every multi-column grid to a single column ───────────────── */
  /* minmax(0, 1fr) (not 1fr) so a wide child can't force the track — and the
     whole form — wider than the viewport. */
  form[data-fcbh-action] > div[style*="grid"],
  #render-ticket-form #render-fields,
  #vessel-ticket-form #vessel-fields,
  #render-ticket-form .two-col,
  #vessel-ticket-form .two-col,
  #vessel-ticket-form .three-col {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  /* Allow grid children to shrink below their content's intrinsic width. */
  form[data-fcbh-action] > div[style*="grid"] > *,
  #render-ticket-form #render-fields > *,
  #vessel-ticket-form #vessel-fields > *,
  #render-ticket-form .two-col > *,
  #vessel-ticket-form .two-col > *,
  #vessel-ticket-form .three-col > * {
    min-width: 0 !important;
  }

  /* ── Let the form use the full screen width ────────────────────────────── */
  #audio-ticket-form,
  #bb-ticket-form,
  #blimp-ticket-form,
  #vr-ticket-form,
  #render-ticket-form,
  #vessel-ticket-form {
    max-width: 100% !important;
    padding: 0 4px;
  }

  /* ── Bigger, tappable fields. 16px font prevents iOS zoom-on-focus. ─────── */
  form[data-fcbh-action] input:not([type="checkbox"]):not([type="radio"]),
  form[data-fcbh-action] select,
  form[data-fcbh-action] textarea,
  #render-ticket-form input:not([type="checkbox"]):not([type="radio"]),
  #render-ticket-form select,
  #render-ticket-form textarea,
  #vessel-ticket-form input:not([type="checkbox"]):not([type="radio"]),
  #vessel-ticket-form select,
  #vessel-ticket-form textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    text-indent: 0 !important;
    padding: 10px !important;
  }

  /* Textareas keep a comfortable height */
  form[data-fcbh-action] textarea,
  #render-ticket-form textarea,
  #vessel-ticket-form textarea {
    min-height: 120px !important;
  }

  /* File inputs: default height is fine, don't force 44px line height */
  form[data-fcbh-action] input[type="file"],
  #render-ticket-form input[type="file"],
  #vessel-ticket-form input[type="file"] {
    min-height: 0 !important;
    padding: 8px !important;
  }

  /* ── Full-width, easy-to-tap submit button ─────────────────────────────── */
  form[data-fcbh-action] button[type="submit"],
  #render-ticket-form button[type="submit"],
  #vessel-ticket-form button[type="submit"] {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px !important;
  }

  /* ── Modals: fit narrow screens, stack the buttons ─────────────────────── */
  .fcbh-modal-overlay > div {
    padding: 22px 18px !important;
    width: 94% !important;
  }
  .fcbh-modal-overlay button {
    width: 100% !important;
    min-height: 46px;
    margin: 0;
  }
}