/* v1.9.4 category administration mobile layout.
   Loaded after the main styles so earlier desktop grid rules cannot re-open
   the two-column layout on iPhone and other narrow screens. */

.category-admin-v194,
.category-admin-v194 > .category-create-card,
.category-admin-v194 > .category-manage-card,
.category-admin-v194 .category-create-form,
.category-admin-v194 .category-admin-list,
.category-admin-v194 .category-admin-row,
.category-admin-v194 .field,
.category-admin-v194 input,
.category-admin-v194 select,
.category-admin-v194 textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.category-admin-v194 > .category-create-card,
.category-admin-v194 > .category-manage-card {
  width: 100%;
}

/* Tablet and mobile: the create and manage cards must always be one full-width
   column. This explicitly overrides the later v1.8.1 desktop grid rule. */
@media (max-width: 1080px) {
  .category-admin-grid.category-admin-v194 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .category-admin-v194 > .category-create-card {
    position: static !important;
    top: auto !important;
  }

  .category-admin-v194 > .category-create-card,
  .category-admin-v194 > .category-manage-card {
    grid-column: 1 / -1 !important;
    overflow: hidden;
  }
}

/* Phone layout: keep the icon and name together, then use the full card width
   for the submit action and every saved-category editor. */
@media (max-width: 640px) {
  .category-admin-v194 > .category-create-card,
  .category-admin-v194 > .category-manage-card {
    padding: 18px !important;
    border-radius: 18px;
  }

  .category-admin-v194 .card-heading,
  .category-admin-v194 .section-heading {
    width: 100%;
    min-width: 0;
  }

  .category-admin-v194 .card-heading h2 {
    overflow-wrap: anywhere;
  }

  .category-admin-v194 .category-create-form {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 13px !important;
    width: 100% !important;
    margin-top: 17px;
  }

  .category-admin-v194 .category-icon-field {
    grid-column: 1;
  }

  .category-admin-v194 .category-name-field {
    grid-column: 2;
  }

  .category-admin-v194 .category-create-form .form-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: stretch !important;
  }

  .category-admin-v194 .category-create-form .form-actions .button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .category-admin-v194 .category-admin-list {
    width: 100%;
    gap: 12px;
  }

  .category-admin-v194 .category-admin-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px !important;
  }

  .category-admin-v194 .category-admin-row .category-icon-field {
    grid-column: 1;
  }

  .category-admin-v194 .category-admin-row .category-name-field {
    grid-column: 2;
  }

  .category-admin-v194 .category-order-field,
  .category-admin-v194 .category-status-field,
  .category-admin-v194 .category-action-field,
  .category-admin-v194 .category-row-suggestions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .category-admin-v194 .category-active-toggle {
    width: 100% !important;
  }

  .category-admin-v194 .category-action-field .field-caption {
    display: none !important;
  }

  .category-admin-v194 .category-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
  }

  .category-admin-v194 .category-action-buttons .button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .category-admin-v194 .category-icon-suggestions {
    width: 100%;
    overflow: hidden;
  }
}

/* Very narrow iPhones: stack the icon and name fields too, preventing long
   localized labels or large text settings from squeezing either control. */
@media (max-width: 390px) {
  .category-admin-v194 .category-create-form,
  .category-admin-v194 .category-admin-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .category-admin-v194 .category-create-form .category-icon-field,
  .category-admin-v194 .category-create-form .category-name-field,
  .category-admin-v194 .category-admin-row .category-icon-field,
  .category-admin-v194 .category-admin-row .category-name-field,
  .category-admin-v194 .category-order-field,
  .category-admin-v194 .category-status-field,
  .category-admin-v194 .category-action-field,
  .category-admin-v194 .category-row-suggestions {
    grid-column: 1 !important;
  }

  .category-admin-v194 .category-icon-field input {
    text-align: left;
  }
}