/* Profile settings use the same typography and spacing as the other fields. */
@media (max-width: 768px) {
  #profiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #profiles-grid .entity-card .field-row {
    position: relative;
  }
  #profiles-grid .entity-card .field-row:has(:is([data-action="throttling-edit"], [data-action="reception-toggle"])) .field-val { flex: 1; }
  #profiles-grid .entity-card :is([data-action="throttling-edit"], [data-action="reception-toggle"]) {
    display: block;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
  }
  /* The whole row responds to taps without enlarging its visual height. */
  #profiles-grid .entity-card :is([data-action="throttling-edit"], [data-action="reception-toggle"])::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* A single scroll area keeps fields and actions reachable on short screens. */
  :is(#add-profile-modal, #profile-device-modal, #profile-app-modal, #profile-groups-modal, #profile-requisites-modal, #profile-expense-dialog, #profile-delete-dialog, #order-limits-dialog, body:has(#screen-profiles.active) #custom-dialog) .modal-content {
    width: calc(100% - 24px);
    max-width: 540px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 16px;
    font-size: 16px;
    line-height: 1.5;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 16px;
  }
  #add-profile-modal .add-profile-modal-content {
    width: calc(100% - 24px) !important;
    max-width: 540px !important;
  }
  :is(#add-profile-modal, #profile-device-modal, #profile-app-modal, #profile-groups-modal, #profile-requisites-modal, #profile-expense-dialog, #profile-delete-dialog, #order-limits-dialog, body:has(#screen-profiles.active) #custom-dialog) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .add-profile-select-trigger, .add-profile-select-option) {
    min-height: 48px;
    max-width: 100%;
    min-width: 0;
    font-size: 16px;
    line-height: 1.5;
    padding: 10px 12px;
    scroll-margin-block: 16px;
  }
  :is(#add-profile-modal, #profile-device-modal, #profile-app-modal, #profile-groups-modal, #profile-requisites-modal, #profile-expense-dialog, #profile-delete-dialog, #order-limits-dialog, body:has(#screen-profiles.active) #custom-dialog) button {
    min-height: 44px;
    font-size: 16px;
    line-height: 1.4;
  }
  :is(#add-profile-modal, #profile-device-modal, #profile-app-modal, #profile-groups-modal, #profile-requisites-modal, #profile-expense-dialog, #profile-delete-dialog, #order-limits-dialog, body:has(#screen-profiles.active) #custom-dialog) .custom-dialog-title {
    font-size: 20px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  :is(#add-profile-modal, #profile-device-modal, #profile-app-modal, #profile-groups-modal, #profile-requisites-modal, #profile-expense-dialog, #profile-delete-dialog) .custom-dialog-title { padding-right: 44px; }
  :is(#add-profile-modal, #profile-device-modal, #profile-app-modal, #profile-groups-modal, #profile-requisites-modal, #profile-expense-dialog, #profile-delete-dialog, #order-limits-dialog, body:has(#screen-profiles.active) #custom-dialog) :is(label, .custom-dialog-label, .custom-dialog-body, .form-action-hint, .add-requisite-hint, .profile-group-meta, .profile-group-member-id) {
    font-size: 14px;
    line-height: 1.5;
  }
  :is(#profile-expense-dialog, #profile-delete-dialog, #order-limits-dialog, body:has(#screen-profiles.active) #custom-dialog) .custom-dialog-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  :is(#profile-expense-dialog, #profile-delete-dialog, #order-limits-dialog, body:has(#screen-profiles.active) #custom-dialog) .custom-dialog-actions button {
    flex: 1;
    min-height: 48px;
    padding: 10px 16px;
  }
  #add-profile-modal .add-profile-fio-row { flex-direction: column; gap: 12px; }
  #add-profile-modal .add-profile-form { gap: 12px; }
  #add-profile-modal .add-profile-select-trigger { white-space: normal; overflow-wrap: anywhere; }
  #add-profile-modal .add-profile-select-options { max-height: 200px; }
  #profile-device-modal .profile-device-modal-body { max-height: none; overflow: visible; margin-top: 12px; }
  #profile-device-modal .profile-device-option {
    grid-template-columns: 9px minmax(0, 1fr);
    padding: 12px;
    gap: 6px 8px;
  }
  #profile-device-modal :is(.profile-device-option-name, .profile-device-option-meta) {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  #profile-device-modal .profile-device-option-state { grid-column: 2; text-align: left; }
  #profile-device-modal .profile-device-option-name { font-size: 16px; }
  #profile-device-modal :is(.profile-device-option-meta, .profile-device-current, .profile-device-option-state) { font-size: 14px; }
  #profile-groups-modal :is(.profile-group-name, .profile-group-member-name, .profile-group-members-hint) { font-size: 16px; overflow-wrap: anywhere; }
  #profile-groups-modal .profile-groups-create { flex-direction: column; gap: 8px; }
  #profile-groups-modal .profile-group-manage { padding: 8px 12px; }
  #profile-requisites-modal .requisite-row { min-height: 48px; display: flex; align-items: center; }
  #profile-requisites-modal .requisites-value { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
  #profile-requisites-modal .requisites-back-link { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
  #profile-requisites-modal .add-requisite-form-wrap { padding: 12px; }
  #profile-requisites-modal .add-requisite-submit { width: 100%; }
}