/* Quick School Bill: keep the action area inside the modal's scroll flow on mobile. */
@media (max-width: 640px) {
  /* Identify the Quick School Bill dialog by its unique parent-name fields. */
  [role="dialog"]:has(#parentName):has(#parentPhone) {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column !important;
  }

  /* The form body must not create a second, independently scrolling viewport. */
  [role="dialog"]:has(#parentName):has(#parentPhone) > .flex-1.overflow-y-auto {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Keep the action area in normal document flow; it must scroll away with the form. */
  [role="dialog"]:has(#parentName):has(#parentPhone) > div.flex-shrink-0.border-t {
    flex-shrink: 0 !important;
    position: static !important;
    inset: auto !important;
  }

  /* Prevent mobile action buttons from colliding or overflowing horizontally. */
  [role="dialog"]:has(#parentName):has(#parentPhone) > div.flex-shrink-0.border-t > div.flex.flex-wrap.justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  [role="dialog"]:has(#parentName):has(#parentPhone) > div.flex-shrink-0.border-t > div.flex.flex-wrap.justify-between > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Cancel + Save Draft stay together on one row. */
  [role="dialog"]:has(#parentName):has(#parentPhone) > div.flex-shrink-0.border-t > div.flex-wrap.justify-between > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  [role="dialog"]:has(#parentName):has(#parentPhone) > div.flex-shrink-0.border-t > div.flex-wrap.justify-between > div:first-child > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* WhatsApp, Download/Print and Add to Records each get their own full-width row. */
  [role="dialog"]:has(#parentName):has(#parentPhone) > div.flex-shrink-0.border-t > div.flex-wrap.justify-between > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  [role="dialog"]:has(#parentName):has(#parentPhone) > div.flex-shrink-0.border-t > div.flex-wrap.justify-between > div:last-child > button {
    width: 100% !important;
    min-width: 0 !important;
  }
}