/* Owner admin: responsive layout fixes on top of Django Admin's own styles (loaded by templates/admin/base_site.html).
   Desktop keeps Django's layout; tablet and phone get wrapping toolbars, full-width fields, larger tap targets and
   tables that scroll inside themselves instead of widening the page. */

/* Fields never grow wider than the screen. */
#content input:not([type=checkbox]):not([type=radio]):not([type=file]),
#content select,
#content textarea { max-width: 100%; box-sizing: border-box; }
#content .form-row > div, #content .flex-container, #content fieldset { min-width: 0; max-width: 100%; }

/* Tablet and phone */
@media (max-width: 1024px) {
  .object-tools { float: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
  .object-tools li { margin: 0; }
  .object-tools a { padding-top: 9px; padding-bottom: 9px; }
  /* The side menu (collapsible with «) takes less of the tablet's width. */
  #nav-sidebar { flex-basis: 240px; max-width: 240px; }
  #changelist .results { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #changelist-filter { max-width: 100%; }
  /* Fields shown side by side (e.g. SEO title + SEO description) wrap onto the next line when there is no room. */
  #content .form-multiline { flex-wrap: wrap; }
  #content .form-multiline > div { min-width: 0; max-width: 100%; }
}

/* Phone */
@media (max-width: 767px) {
  #header { padding: 12px 16px; }
  #site-name { font-size: 20px; }
  #user-tools { line-height: 2; }
  div.breadcrumbs { padding: 10px 16px; }
  #content { padding: 16px; }

  /* One column, fields as wide as the screen, help text under its field. */
  #content .aligned .form-row input:not([type=checkbox]):not([type=radio]):not([type=file]),
  #content .aligned .form-row select,
  #content .aligned .form-row textarea { width: 100%; }
  #content .aligned .help, #content .aligned div.help, #content .aligned p.help { margin-left: 0; padding-left: 0; }

  /* Easy-to-tap buttons. */
  .submit-row input, .submit-row a, #content .button, #content input[type=submit],
  #changelist-search input[type=submit], .actions button { min-height: 44px; }
  .submit-row { gap: 8px; }

  /* Listing tables: readable columns, sideways scrolling inside the table only. */
  #result_list th, #result_list td { white-space: nowrap; }
  #result_list .field-title_display, #result_list .field-__str__ { white-space: normal; min-width: 180px; }
}